Scroll trigger animations

Component 45

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


export default function ContainerScrollInsetXDemo() {
  return (
    <ContainerScrollAnimation>
      <ContainerScrollTranslate className="h-dvh  py-8 px-6 flex justify-center items-center">
        <ContainerScrollInsetX
          className="overflow-hidden w-4/5 mx-auto  rounded-md flex justify-center items-center"
          insetRange={[120, 0]}
        >
          <video
            className="relative z-10  max-h-full max-w-full "
            src="https://videos.pexels.com/video-files/8086711/8086711-uhd_2560_1440_25fps.mp4"
            autoPlay
            muted
            loop
            playsInline
          />
        </ContainerScrollInsetX>
      </ContainerScrollTranslate>
    </ContainerScrollAnimation>
  );
}