Command Palette

Search for a command to run...

Loading component...

Components free Card stack with gsap and rotate

Card stack with gsap and rotate

Interactive sticky card stack with GSAP-powered scroll animations. Features a collection of cards that scale, rotate, and transform as users scroll, creating an engaging parallax effect with smooth GSAP animations and Lenis smooth scrolling.

Dependencies

gsaplenis@gsap/react

Interaction Type

Scroll to see card scaling and rotation animations
Sticky cards
Smooth scrolling with Lenis

with shacn cli3.0

//components.json
  "registries": {
    "@skiper-ui": "https://skiper-ui.com//registry/{name}.json"
  }
npx shadcn add @skiper-ui/skiper17

OR with old shacncli

 npx shadcn@latest add https://skiper-ui.com/registry/skiper17.json

How to use

import { StickyCard002 } from "@/components/v1/skiper17";

const cards = [
  {
    id: 1,
    image: "/path/to/your/image1.jpg",
    alt: "Description 1",
  },
  {
    id: 2,
    image: "/path/to/your/image2.jpg",
    alt: "Description 2",
  },
  // Add more cards as needed
];

const BasicDemo = () => {
  return (
    <div className="h-screen w-full">
      <StickyCard002 cards={cards} />
    </div>
  );
};

Customized Card Stack

import { StickyCard002 } from "@/components/v1/skiper17";

const CustomDemo = () => {
  const customCards = [
    {
      id: "project-1",
      image: "/images/projects/project1.jpg",
      alt: "Project 1",
    },
    {
      id: "project-2",
      image: "/images/projects/project2.jpg",
      alt: "Project 2",
    },
    {
      id: "project-3",
      image: "/images/projects/project3.jpg",
      alt: "Project 3",
    },
  ];

  return (
    <div className="h-screen w-full bg-gray-900">
      <StickyCard002
        cards={customCards}
        className="bg-gradient-to-br from-gray-900 to-black"
        containerClassName="rounded-2xl shadow-2xl"
        imageClassName="object-cover"
      />
    </div>
  );
};
Props
Description

cards

Array of card objects with id, image, and optional alt text

className

CSS classes for the main container

containerClassName

CSS classes for the cards wrapper container

imageClassName

CSS classes for card images

Attribution

illustrations are from lummi.ai

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext