Scaling On Scroll

Component 1

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scaling On Scroll to your project and fits it to your theme.

Code

How Scaling On Scroll is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { ScalingOnScroll } from "@/components/ui/scaling-on-scroll"
const DemoShowcase: React.FC = () => {
  return (
    <div className="relative overflow-hidden bg-black min-h-screen">
      <section className="flex flex-col justify-center items-center min-h-screen p-8 gap-6">
        <h1 className="text-center text-white text-3xl font-light">Scaling Demo</h1>
        <ScalingOnScroll 
          backgroundColor="#ff5733"
          width="20em"
          content={
            <video autoPlay muted playsInline loop className="object-cover w-full h-full pb-0 pr-0 absolute rounded-inherit">
              <source src="https://cdn.21st.dev/assets/mirror/35/35067cc101cf9af9d47475c4826c254d26551ab641daa8aa742e2652f5effe74.mp4" type="video/mp4" />
            </video>
          }
        />
      </section>
      <section className="flex flex-col justify-center items-center pb-16 px-4 gap-16">
        <div className="rounded-2xl w-full max-w-4xl relative">
          <div className="pt-[56.25%]"></div>
          <div data-flip-element="wrapper" className="absolute top-0 left-0 w-full h-full"></div>
        </div>
      </section>
    </div>
  );
};

export default DemoShowcase;