Scroll trigger animations

Component 107

About

- Motion (framer motion) animations triggered by scroll event.

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

Code

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

Usage.tsx

import { 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://cdn.21st.dev/assets/mirror/1a/1a7829ab92f922524ed0c06bebc20c1aa7c4eb93ca236c23762cdba603081c41.jpg"
            alt="tokyo"
            className="max-w-full max-h-full"
          />
        </ContainerScrollScale>
      </ContainerScrollTranslate>
    </ContainerScrollAnimation>
    )
}