StackBits

Buttons

Animated Gradient Button

Copy Button

Hold Button

Toggle Button

Moving Border Button

Navigation Button

Pagination Button

Random Button

Shine Button

Backgrounds

Glowing Dots Background

Prismatic Haze Background

Proximity Background

Space Travel

Wavy Background

Texts

Blur Text

Bounce In Text

Dotted Text

Glitch Text

Gooey Words

Hidden Text

Pixelated Text

Rainbow Text

Sentence Flip

Wavy Text

Utilities

Axios Interceptor

Custom Logger

Dark & Light Theme

Debounce

Encryption Decryption

Express Server

Regex Validations

Yup Validations

Stack Scroll

A scrollable component that displays images in a stacked card layout. As you scroll, the cards animate with smooth transitions, scaling, and positioning effects to create an engaging visual experience.

Install dependencies

npm i framer-motion     

Component

Create a file stack-scroll.tsx in your components folder and paste this code

'use client';

import React, { useRef } from 'react';
import Image from 'next/image';
import { motion, MotionValue, useScroll, useTransform } from 'framer-motion';

const StackScrollItem = ({
  image,
  index,
  isLeft,
  scrollYProgress,
  totalItems
}: {
  image: string;
  index: number;
  isLeft: boolean;
  scrollYProgress: MotionValue<number>;
  totalItems: number;
}) => {
  const direction = isLeft ? -1 : 1;
  const position = index / (totalItems / 2);
  const isFirst = index === 0;
  const isLast = index === totalItems / 2 - 1;

  const exitGap = 0.04;

  const translateY = useTransform(
    scrollYProgress,
    [0, position, position + exitGap, 1],
    [0, 0, ...(isLast ? [0, 0] : [-50, -50])]
  );
  const translateX = useTransform(
    scrollYProgress,
    [0, position, 1],
    [isFirst ? 0 : index * 20 * direction, 0, isLast ? 0 : -index * 20 * direction]
  );
  const scale = useTransform(
    scrollYProgress,
    [0, position, ...(isLast ? [1] : [position + exitGap, 1])],
    [1 - index * 0.1, 1, ...(isLast ? [1] : [1.2, 1.2])]
  );
  const opacity = useTransform(
    scrollYProgress,
    [0, position, ...(isLast ? [1] : [position + exitGap, 1])],
    [1, 1, ...(isLast ? [1] : [0, 0])]
  );
  const blur = useTransform(
    scrollYProgress,
    [0, position, ...(isLast ? [1] : [position + exitGap, 1])],
    [2, 0, ...(isLast ? [0] : [10, 10])]
  );

  return (
    <motion.div
      style={{
        translateX,
        translateY,
        scaleY: scale,
        opacity,
        filter: useTransform(blur, (value) => `blur(${value}px)`),
        zIndex: totalItems - index
      }}
      className="h-[300px] max-w-sm w-full absolute rounded-xl overflow-hidden"
    >
      <Image
        src={image}
        alt={image}
        width={1000}
        height={1000}
        className="object-cover h-full w-full"
      />
    </motion.div>
  );
};

const StackScroll = ({ items }: { items: { image: string }[] }) => {
  const ref = useRef<HTMLDivElement>(null);

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

  return (
    <div
      ref={ref}
      className="h-full w-full overflow-y-auto relative"
      style={{ minHeight: '400px' }}
    >
      <div className="h-full w-full absolute top-0 left-0">
        <div
          className="w-full"
          style={{
            height: (items.length / 2 + 2) * 300
          }}
        />
      </div>
      <div className="grid grid-cols-2 gap-12 h-full w-full sticky top-0 left-0">
        <div className="flex flex-col h-full justify-center w-full items-end relative">
          {items.slice(0, items.length / 2).map((image, index) => (
            <StackScrollItem
              key={`left-column-image-${index}`}
              image={image.image}
              index={index}
              isLeft={true}
              scrollYProgress={scrollYProgress}
              totalItems={items.length}
            />
          ))}
        </div>
        <div className="flex flex-col h-full justify-center w-full items-start relative">
          {items.slice(items.length / 2).map((image, index) => (
            <StackScrollItem
              key={`right-column-image-${index}`}
              image={image.image}
              index={index}
              isLeft={false}
              scrollYProgress={scrollYProgress}
              totalItems={items.length}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default StackScroll;

Usage

<div className="h-full w-full flex flex-col items-center justify-center gap-2 bg-white/10">
  <StackScroll items={[...images, ...images]} />
</div>