You know that effect where you scroll a page and the layout reshuffles itself: grid to fullscreen, gallery to stacked list, all while the section stays pinned. Tympanus.net just shipped a fresh take on it using GSAP's ScrollTrigger and Flip plugins.
If you build landing pages, product showcases, or portfolio sites, this combo is the cleanest way to do it in 2024.
The two-plugin combo
ScrollTrigger pins a section to the viewport while the user scrolls past it. Flip handles layout transitions: it calculates the difference between the starting and ending layout, then animates each element to its new spot. Together, they let you scroll-drive a full layout swap.
The trick is class-based switching. You define a starting layout, add a "switch" class via ScrollTrigger, then style the end state in CSS. Flip does the rest.
What the demos show
The article walks through three examples:
- Grid to fullscreen: A grid of cards rearranges into one large image with inner content fading in.
- Irregular grid to stack: A messy grid becomes a vertical stack, with a title sliding into place on top.
- AI-generated images, with one real photo hidden in the mix (a fun visual gag).
Each demo uses CSS for the layout states and minimal JS for the trigger. Most of the work happens before any JavaScript runs.
Our analysis
Why this approach beats hand-rolled solutions: Flip calculates transforms automatically. You don't write keyframes for every card. You define the end state in CSS, flip the class, and Flip figures out the path.
Trade-offs: GSAP is a paid library for commercial use. The free version covers most needs, but if you ship to a big product, budget for a license. Also, Flip's FLIP technique reads the DOM, so it's not magic for hundreds of elements. Use it on sections with under 50 items.
Who benefits: design-led marketing sites, agency portfolios, product launch pages. Who loses: content-heavy news sites, dashboards, anything with rapidly changing data.
A practical scenario
Say you're designing a portfolio site for a photographer. The homepage shows a 4×3 grid of thumbnails. As the user scrolls into the second section, you want one image to expand fullscreen while the others fade out, all pinned. Add ScrollTrigger to pin the section, add a "switch" class at 50% scroll, style the fullscreen state in CSS, run Flip.fit() on the change. About 20 lines of JS, no manual keyframes.
What to watch next
Watch for the View Transitions API to mature. Chrome and Edge already support it, and it does similar FLIP-style transitions natively. For broad browser support today, GSAP is still the safer pick. For cutting-edge personal projects, View Transitions is worth a look.
Key takeaways
- ScrollTrigger pins, Flip animates the layout swap between two CSS states.
- Use a class switch to control the transition end state.
- GSAP is the reliable choice for cross-browser production work today.
Frequently asked questions
What is the GSAP Flip plugin?
A plugin that animates elements between two layout states by calculating their start and end positions automatically.
Do I need both ScrollTrigger and Flip?
For pinned scroll-driven layout swaps, yes. ScrollTrigger handles pinning, Flip handles the layout tween.
Is GSAP free?
Free for most uses. Commercial projects on big budgets need a Club GreenSock license.
Can I do this with pure CSS?
Partially, with scroll-driven animations. But for FLIP-style layout swaps, JS is still needed.
How many elements can Flip handle smoothly?
Roughly 50 or fewer per transition. Beyond that, performance drops.
Source: tympanus.net