April 27, 2026IntermediateGalleries & Media
Case Overview Scroll
Full-viewport stacked case study slider. Each slide is sticky and its image receives scroll-driven translateY and scale transforms, creating a parallax depth effect as slides layer over each other. Inspired by DashDigital's case overview pattern.
Preview
Source
import CaseOverviewScroll from "./index.jsx";
const slides = [
{
title: "Novatrex",
tags: ["strategy", "design", "development"],
imageSrc: "/demo-assets/Novatrext/component1.webp",
href: "#",
},
{
title: "Kick & Bass",
tags: ["branding", "design", "development"],
imageSrc: "/demo-assets/kickandbass.png",
href: "#",
},
{
title: "Westend",
tags: ["research", "strategy", "design"],
imageSrc: "/demo-assets/westend.png",
href: "#",
},
{
title: "Delivrd",
tags: ["design", "development", "content"],
imageSrc: "/demo-assets/delivrd.png",
href: "#",
},
{
title: "Social Stats",
tags: ["research", "strategy", "design", "development"],
imageSrc: "/demo-assets/socialstats.png",
href: "#",
},
{
title: "Studio Portfolio",
tags: ["design", "development"],
imageSrc: "/demo-assets/Novatrext/component3.webp",
href: "#",
},
];
export default function CaseOverviewScrollDemo() {
return <CaseOverviewScroll slides={slides} />;
}
Dependencies
gsap





