Web Animations Medium
Slice Reveal Cards
Auto-advancing cards that break into vertical slices and reassemble using GSAP timelines for a stylized transition.
html css gsap javascript
Targets: HTML
Code
Slice Reveal Cards
Cards that shatter into vertical slices and then reassemble into the next scene. Each card is split into multiple columns; GSAP animates them up/down with slight rotation to create a dynamic “slice” transition.
How it works
- Dynamic slices — JavaScript builds
slicesPerCardslices per card, each with a background position offset so the full image reconstructs across columns. - GSAP timeline — On each interval, the next card’s slices rise from below while the current card’s slices exit upward, with stagger and rotation for extra motion.
- Progress bar — A thin bar at the bottom reflects the time until the next slice transition.
When to use it
- Editorial or portfolio sections where you want a distinctive card transition
- Hero galleries with strong photography
- Any card carousel where a “broken into slices” reveal fits the visual style