Gooey Filter Chips
Filter chips that fly into a selection tray and merge into it with a gooey neck when picked, then pull back out with a snap when removed. The results count rolls with every change.
One of 89 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.
The chips and the bar are two separate things that have to read as one liquid body when they meet. The first version reparented the chip into the bar and let the browser lay it out, which fought every animation, so now the component works out where every chip and the bar itself belong for any selection and moves all of it in one go. Clicking mid-flight just retargets that move instead of restarting it.
The goo underneath is a plain copy of each shape, hidden exactly behind the real one, and the merge is only what the filter draws where two copies touch. That is also the honest limit: pulling a chip out reads better than putting one in, because coming out the connection stretches, thins and breaks, and a break is something you can see. Going in there is nothing to break, so the bar opens first and the chip's slow landing is spent crossing its edge.
Past that it's yours. Use your own filters, set how long a chip travels, how thick the goo is and how long it holds on. Clearing runs its own way: the chips furthest along leave first and the bar shrinks past each one in turn, so every chip gets its moment at the opening.
What you'll need.
Install
- GSAP
- 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 Gooey Filter Chips work with React and Vue?
- Gooey Filter Chips 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 Gooey Filter Chips?
- Yes. Gooey Filter Chips 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 Gooey Filter Chips without editing code?
- Gooey Filter Chips 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 Gooey Filter Chips free?
- Gooey Filter Chips is part of the Annnimate Library, a paid subscription (from EUR 20/month billed quarterly, or EUR 199/year). The live preview and customization run free on this page; the paste-ready code is for members.
- What if Gooey Filter Chips is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Gooey Filter Chips or the library does not fit your project, reply to your receipt within 14 days for a full refund, no questions asked.
- Can I use Gooey Filter Chips in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Gooey Filter Chips on as many projects as you build, with no attribution required.
- Does Gooey Filter Chips 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.
