Skip to content

component

Sticker Peel Scroll

By Jirei

Details

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.

Introduction

Peeling effect for scroll cards.

Rank history

Daily rank per list, from the first snapshot — lower is better.

110012001300139068/148/228/309/79/15
  • All · #3468