Card Stack Animations on Scroll with Framer Motion and Tailwind CSS

Status: #seedling

#react #animations #tutorial

Collapse cards on scroll

This is the classic animation that a Google search would provide you and it looks like this:

useScroll and useTransform are very powerful hooks in framer.

In my situation, it was convenient that the height of the container is exact (e.g. 1850px) - it helped with responsiveness as well, to ensure there is enough spacing in the section.

Tailwind

The container of

<div className="relative min-h-[1880px]"
ref={containerRef}>
	<div className="sticky top-0">
	<div className="w-full max-w-[1124px]">
		{...}
	</div>
</div>

const containerRef = useRef<HTMLDivElement>(null);

const { scrollYProgress } = useScroll({
	target: containerRef,
	offset: ['start start', 'end end'],
});

  const cardY = useTransform(scrollYProgress, [0.5, 0.75], ['110%', '0%']);
  const cardScale = useTransform(scrollYProgress, [0.4, 0.75], [0.85, 1]);
  const cardOpacity = useTransform(scrollYProgress, [0.4, 0.45, 0.75], [0, 1, 1]);

Reveal cards on scroll

For this one, the offset parameter of the useScroll hook might differ - I used '0 0.1 for my case, then tried to reverse the order of

const cardY = useTransform(scrollYProgress, [0, 0.4, 0.92], ['100%', '70%', '216%']);

const cardScale = useTransform(scrollYProgress, [0.4, 0.9, 1], [0.92, 0.92, 1]);

const cardOpacity = useTransform(scrollYProgress, [0, 0.5, 0.55], [0, 0, 1]);

Sources