Scroll trigger animations

Galleries 180

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

const IMAGES_1 = [
  'https://cdn.21st.dev/assets/mirror/db/db8e72b6f6e2f325ec74898fdab6a02f3c0ba7962f3cf0b89f0ee3b22aa2a083.jpg',
  'https://cdn.21st.dev/assets/mirror/d7/d7df7147a707f9f61f1f450951411557643272444ac223927da900b50d652827.jpg',
  'https://cdn.21st.dev/assets/mirror/c1/c11e1380b493bde78fc8cbe31655de60206983e223ad6d3e10e6e25c0fe9ac7b.jpg',
  'https://cdn.21st.dev/assets/mirror/1a/1a7829ab92f922524ed0c06bebc20c1aa7c4eb93ca236c23762cdba603081c41.jpg',
];
const IMAGES_2 = [
  'https://cdn.21st.dev/assets/mirror/8d/8d908cbf27d6e9277f8224ce22cab6d716530135eeaa56879c479a3ef7a26549.jpg',
  'https://cdn.21st.dev/assets/mirror/f5/f5e73e76ce71918f46725a5d49c4debbc3671349cc1161e0216bc2f48d2025be.jpg',
  'https://cdn.21st.dev/assets/mirror/8d/8d908cbf27d6e9277f8224ce22cab6d716530135eeaa56879c479a3ef7a26549.jpg',
  'https://cdn.21st.dev/assets/mirror/53/53f281293f06536d7f60b1786b0a39404390a55e1675e99e089d2b72234cf8cb.jpg',
];
const IMAGES_3 = [
  'https://cdn.21st.dev/assets/mirror/cc/cca3057fca89d1a2442b95664dd397ec4c48113be6babc1ac08a19b931b55857.jpg',
  'https://cdn.21st.dev/assets/mirror/4d/4db99a81fb918f93ae0a5e138425845d05664c70c2c43e09527c7cf29c9e88a4.jpg',
  'https://cdn.21st.dev/assets/mirror/4d/4d5d2ca72288839daf08233689db6728ae440162f09bf5fb7983b0a80d601e86.jpg',
  'https://cdn.21st.dev/assets/mirror/85/85a98f8253097be06cfdaa5a312c644d4df00749aad17dda4468ab8d3dce7bd0.jpg',
];

export default function DemoOne() {
  return (
    <ContainerScrollAnimation className="overflow-hidden">
      <ContainerScrollTranslate className="h-dvh relative">
        <ContainerScrollInsetX className="h-full relative">
          <ContainerScrollScale className="flex bg-secondary gap-2 overflow-hidden px-6">
            <ContainerScrollTranslate
              yRange={['0%', '-10%']}
              className="flex flex-col gap-2"
            >
              {IMAGES_1.map((imageUrl, index) => (
                <img
                  key={index}
                  className="aspect-[4/2.5] inline-block align-middle h-auto max-h-full w-full  object-cover"
                  src={imageUrl}
                  alt="gallery item"
                />
              ))}
            </ContainerScrollTranslate>

            <ContainerScrollTranslate
              yRange={['0%', '20%']}
              className="flex mt-[-20%] relative flex-col gap-2"
            >
              {IMAGES_2.map((imageUrl, index) => (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  key={index}
                  className="aspect-[4/2.5] inline-block align-middle h-auto max-h-full w-full  object-cover"
                  src={imageUrl}
                  alt="gallery item"
                />
              ))}
            </ContainerScrollTranslate>

            <ContainerScrollTranslate
              yRange={['0%', '-10%']}
              className="hidden md:flex flex-col gap-2"
            >
              {IMAGES_3.map((imageUrl, index) => (
                // eslint-disable-next-line @next/next/no-img-element
                <img
                  key={index}
                  className="aspect-[4/2.5] inline-block align-middle h-auto max-h-full w-full  object-cover"
                  src={imageUrl}
                  alt="gallery item"
                />
              ))}
            </ContainerScrollTranslate>
          </ContainerScrollScale>
        </ContainerScrollInsetX>
      </ContainerScrollTranslate>
    </ContainerScrollAnimation>
  )
}