Components
Loading preview...
- Motion (framer motion) animations triggered by scroll event.
@YoucefBnm
npx shadcn@latest add https://21st.dev/r/youcefbnm/scroll-trigger-animationsimport { ContainerScrollAnimation,
ContainerScrollScale,
ContainerScrollTranslate
} from "@/components/ui/scroll-trigger-animations";
export default function ScrollTriggerScaleDemo () {
return (
<ContainerScrollAnimation>
<ContainerScrollTranslate className="h-dvh py-8 px-6 flex justify-center items-center">
<ContainerScrollScale
className="overflow-hidden rounded-4xl shadow"
scaleRange={[0.4, 1]}
>
<img
src="https://images.unsplash.com/photo-1608501078713-8e445a709b39?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="tokyo"
className="max-w-full max-h-full"
/>
</ContainerScrollScale>
</ContainerScrollTranslate>
</ContainerScrollAnimation>
)
}