# Scaling On Scroll

> The ScalingOnScroll component is a React component that creates a dynamic scaling effect on scroll using GSAP's ScrollTrigger and Flip plugins. It allows an element to scale and transition between positions as the user scrolls, ideal for engaging UI interactions. Key features include customizable content, adjustable width, and background color control.

- Author: [Erik X](https://21st.dev/@aghasisahakyan1)
- License: mit
- npm dependencies: gsap, gsap/dist/Flip, gsap/dist/ScrollTrigger
- Live preview: https://21st.dev/@aghasisahakyan1/components/scaling-on-scroll

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/aghasisahakyan1/scaling-on-scroll?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