Skip to content

Sticker Peel Scroll

Peeling effect for scroll cards.

Sticker Peel Scroll preview image 1

Summary

Peeling effect for scroll cards.

Description

A highly interactive, physics-inspired sticky scroll component for Framer. As users scroll down your page, the topmost card elegantly bends and peels off from the top-right corner—revealing the next card in the deck. It's built entirely natively with `framer-motion` and CSS clip-paths for buttery smooth, 60fps performance without taking over the native browser scroll.

Features & Customization:

- Dynamic Content: Accept arbitrary Framer components (using native Slots) or quickly upload an array of images.

- Tactile Peel Effect: Features a folding sticker flap that mirrors the cut path perfectly, complete with dynamic drop shadows that cast realistic depth onto the underlying cards.

- Customizable Flap: Adjust the back color of the peeling sticker. Supports solid colors or rich Framer gradients.

- Responsive Sizing: Configure exact Card Width and Height controls, with horizontal overflow protection to ensure a perfect fit on mobile devices.

- Alignment: Control the alignment (X and Y) of the card deck within the viewport.

- Accessibility: Includes a robust "Disable Animation" toggle, allowing the component to fall back to a static layout for accessibility and performance.

Rank history How rankings work →

12001400141148/149/59/2710/1911/10
  • All · #4114

Details

More like this