Elastic Grid Scroll
Elastic grid scroll animation with GSAP.
Category
GridReact
CSS
Tailwind
Manual
Create a file and paste the following code into it.
src/scroll-grid-demo.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import {
ElasticGridScroll,
type ElasticGridItem,
} from "@/components/ui/elastic-grid-scroll";
const BASE_ITEMS: ElasticGridItem[] = [
{ id: "21", imageUrl: "https://picsum.photos/seed/egs-21/900/1200" },
{ id: "22", imageUrl: "https://picsum.photos/seed/egs-22/900/1200" },
{ id: "23", imageUrl: "https://picsum.photos/seed/egs-23/900/1200" },
{ id: "24", imageUrl: "https://picsum.photos/seed/egs-24/900/1200" },
{ id: "25", imageUrl: "https://picsum.photos/seed/egs-25/900/1200" },
{ id: "26", imageUrl: "https://picsum.photos/seed/egs-26/900/1200" },
{ id: "27", imageUrl: "https://picsum.photos/seed/egs-27/900/1200" },
{ id: "28", imageUrl: "https://picsum.photos/seed/egs-28/900/1200" },
{ id: "29", imageUrl: "https://picsum.photos/seed/egs-29/900/1200" },
{ id: "30", imageUrl: "https://picsum.photos/seed/egs-30/900/1200" },
{ id: "31", imageUrl: "https://picsum.photos/seed/egs-31/900/1200" },
{ id: "32", imageUrl: "https://picsum.photos/seed/egs-32/900/1200" },
{ id: "33", imageUrl: "https://picsum.photos/seed/egs-33/900/1200" },
{ id: "34", imageUrl: "https://picsum.photos/seed/egs-34/900/1200" },
{ id: "35", imageUrl: "https://picsum.photos/seed/egs-35/900/1200" },
{ id: "36", imageUrl: "https://picsum.photos/seed/egs-36/900/1200" },
{ id: "37", imageUrl: "https://picsum.photos/seed/egs-37/900/1200" },
{ id: "38", imageUrl: "https://picsum.photos/seed/egs-38/900/1200" },
{ id: "39", imageUrl: "https://picsum.photos/seed/egs-39/900/1200" },
{ id: "40", imageUrl: "https://picsum.photos/seed/egs-40/900/1200" },
];
const REPEATS = 8;
const ITEMS: ElasticGridItem[] = Array.from({ length: REPEATS }).flatMap(
(_, batchIndex) =>
BASE_ITEMS.map((item) => ({
...item,
id: `${item.id}-${batchIndex}`,
}))
);
export default function ScrollGridDemo() {
return <ElasticGridScroll items={ITEMS} />;
}Update the import paths to match your project setup.