Components
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.
Loading preview...
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://videocdn.cdnpk.net/joy/content/video/free/2022-01/large_preview/220114_01_Drone_4k_017.mp4?token=exp=1746210453~acl=/*~hmac=febca75a8bf3643d878ef99832f83a39ccea96094148231b305f156f1f0b0c56" 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;