Scroll 3D Cards — Free GSAP ScrollTrigger 3D Flip-Up Cards

Scroll 3D cards is the entrance where each card lies tilted back in 3D space and rotates upright as it scrolls toward the center of the screen, like pages standing up — a depth-rich alternative to a flat fade-in. This snippet builds it with GSAP and ScrollTrigger (from a CDN) and CSS 3D, with each card animated by its own scrubbed trigger.

Perspective creates the depth

The list container sets perspective: 1100px, which is what turns the cards' rotateX into genuine 3D foreshortening rather than a flat vertical squash. Each card also gets transform-style: preserve-3d. Without the perspective on the parent, a rotateX would just look like the card getting shorter; with it, the top edge appears to lean away and swing toward you as it rights itself.

Per-card scrubbed tween

Every card gets its own gsap.fromTo tied to a ScrollTrigger on that card. It animates from rotateX: -55, pushed down (y: 80) and transparent, to flat, in place, and opaque — with the trigger running from start: 'top 88%' to end: 'top 45%' and scrub: true. So each card rotates upright precisely as it travels from the lower part of the viewport up toward center, and tilts back if you scroll up. Giving each card its own trigger is what lets them animate independently as they enter, rather than all at once.

transform-origin sells the hinge

The rotation uses transformOrigin: '50% 100%', so the card pivots around its bottom edge — it stands up from its base like a hinged panel, which is far more convincing than rotating around the center. This single property is the difference between "flipping up" and "spinning in place".

Scrub ties motion to position, not time

Because the trigger is scrubbed, the card's angle is a direct function of how far it has scrolled into the viewport, so it's fully reversible and never plays out of step with the scroll. Slow scrolling reveals the cards slowly; fast scrolling snaps them upright — the motion always matches the user's pace.

GPU-composited

Only transform (rotateX, y) and opacity animate, so the browser composites the cards without layout work, and will-change and the box shadow give them a floating, physical quality as they swing up. The effect stays smooth even with many cards because each trigger only animates while its card is in the active range.

Customizing it

Change the starting tilt, the rise distance, the trigger range for an earlier or later flip, or the easing; rotate on rotateY for a door-like swing instead. Pair it with a scroll reveal grid, a scroll sticky stack, or 3d card tilt.