Flip Filter
A filterable product grid where clicking a category flies every card smoothly to its new spot instead of jumping, and a toggle switches the whole thing between grid and list without losing your place - cards farthest from home always move last.
One of 70 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
How it's built.
Grid and list are not two components with a crossfade between them - they are one set of cards whose layout is described twice in CSS, with GSAP's Flip plugin measuring the difference and animating it. The card itself is deliberately never animated: it is an invisible box that simply takes its new geometry, so a row expanding to four times its width is never something you see. Only the photograph and its copy move.
Cards being filtered out do not animate anywhere - they just fade, fast. That is deliberate: a card with no place in the new layout has no honest destination to travel to, so inventing one reads as decoration. Taking them out of layout immediately is what lets the surviving cards begin re-settling across the very same moment, which is why the whole change feels like one movement rather than a sequence of two.
The filter pill is a single element rather than one per button. It gets reparented into whichever button was clicked and Flip animates the gap it just crossed, so the marker can never drift out of sync with the active state the way five separately-animated backgrounds would. The same count roller doubles as a preview: hovering a filter rolls the number to what that filter would show, before you commit to it.
What you'll need.
Install
- GSAP
- Flip
- CustomEase
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Flip Filter work with React and Vue?
- Flip Filter ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Flip Filter?
- Yes. Flip Filter is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Flip Filter without editing code?
- Flip Filter exposes 4 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Flip Filter free?
- Flip Filter is part of the Annnimate Library, a paid subscription (from EUR 249/year). The live preview and customization run free on this page; the paste-ready code is for members.
- Can I use Flip Filter in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Flip Filter on as many projects as you build, with no attribution required.
- Does Flip Filter respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
