# Parallax Scrolling Text Effect

> This code implements a captivating parallax scrolling effect on a text element using Framer Motion.  It leverages scroll position and velocity to dynamically alter the text's skew and horizontal position, creating a visually engaging user experience.  The effect is achieved by using Framer Motion's hooks: `useScroll`, `useVelocity`, and `useTransform` to map scroll progress and velocity to CSS transformations.  `useSpring` adds a smooth, springy animation to the transformations, enhancing the visual appeal. The code defines a section with a significant height (`h-\[1000vh\]`) to provide ample scroll space.  A `motion.p` element contains the text; its `skewX` and `x` styles are dynamically updated based on the scroll position and velocity. The `offset` property in `useScroll` ensures the effect starts and ends at specific points within the section. The `useTransform` hook maps the scroll velocity to a skew angle, creating a tilting effect as the user scrolls, and maps the scroll progress to a horizontal displacement, adding a parallax effect. The `useSpring` hook applies spring physics to both the skew and horizontal displacement, resulting in a smooth and natural animation.  This technique can be applied to various scenarios, including hero sections, website headers, and other interactive elements to enhance user engagement and create a more dynamic visual experience. For example, imagine a website promoting a new product; this effect could be used to highlight the product title or tagline as the user scrolls down the page.  The effect is highly customizable; by adjusting the parameters of `useTransform` and `useSpring`, developers can tailor the animation to match their specific design requirements.  Framer Motion's declarative approach simplifies the implementation of complex animations, making this a relatively straightforward solution for developers of all skill levels.

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/parallax-scrolling-text-effect

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/parallax-scrolling-text-effect?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt