Сцена с фотографиями закрепляется на экране, пока вы прокручиваете страницу. Каждая следующая карточка выезжает снизу и ложится поверх, а предыдущая в это время уменьшается и слегка поворачивается, образуя под ней стопку.
Анимация привязана к прокрутке через GSAP ScrollTrigger со сглаживанием: при прокрутке назад карточки так же плавно возвращаются. Масштаб и угол уходящей карточки, сглаживание и скругление настраиваются пропсами.
Скопируйте эти файлы в components/rotating-card-stack/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { useRef } from "react";
import { RotatingCardStack } from "@/components/rotating-card-stack/rotating-card-stack";
const cards = [
{ id: 1, image: "/photos/1.webp" },
{ id: 2, image: "/photos/2.webp" },
{ id: 3, image: "/photos/3.webp" },
];
export function Gallery() {
const scrollerRef = useRef<HTMLDivElement>(null);
return (
<div ref={scrollerRef} className="h-dvh overflow-y-auto">
<div className="h-dvh">
<RotatingCardStack cards={cards} scroller={scrollerRef} endRotation={5} endScale={0.7} />
</div>
</div>
);
}cardsКарточки: id, image и необязательный alt
Тип RotatingCard[]
scroller?Прокручиваемый контейнер, к которому привязана анимация
Тип RefObject<HTMLElement | null>·По умолчанию окно
endScale?Масштаб, до которого уменьшается уходящая карточка
Тип number·По умолчанию 0.7
endRotation?Угол поворота уходящей карточки в градусах
Тип number·По умолчанию 5
scrub?Сглаживание привязки к прокрутке в секундах
Тип number·По умолчанию 0.5
radius?Скругление карточек в пикселях
Тип number·По умолчанию 32
className?Классы корневого блока
Тип string
containerClassName?Классы рамки со стопкой
Тип string
imageClassName?Классы каждой картинки
Тип string