Scroll trigger animations

Component 29

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,
  ContainerScrollInset,
  ContainerScrollTranslate,
 } from "@/components/ui/scroll-trigger-animations";



export default function ScrollTriggerRadiusDemo () {
    return (
        <ContainerScrollAnimation>
      <ContainerScrollTranslate className="h-dvh  py-8 px-6 flex justify-center items-center">
        <ContainerScrollInset
          className="overflow-hidden size-96"
          insetRangeY={[0, 0]}
          insetXRange={[0, 0]}
          roundednessRange={[1000, 16]}
        >
          <img
            src="https://cdn.21st.dev/assets/mirror/1a/1a7829ab92f922524ed0c06bebc20c1aa7c4eb93ca236c23762cdba603081c41.jpg"
            alt="tokyo"
            className="size-full object-cover"
          />
        </ContainerScrollInset>
      </ContainerScrollTranslate>
    </ContainerScrollAnimation>
    )
}