How to build a smooth animated filter section like this Nuxt.js/Vue.js website?

Question

I'm trying to replicate the filter section from the top part of this website: https://kimeracorp.eu/

It has a smooth animation when toggling filter options, and the content adjusts dynamically. I believe it's built using Nuxt.js or Vue.js.

How can I create a similar UI/UX in Next.js? Any tips on which libraries, transition techniques, or component structure to use?

Thanks in advance!

a website like this most likely designed a custom feature here based on the "chips" UI element with transition animations using an animation platform like Greensock. at least thats how i would do it. — JRT
– JRT, Commented Jun 2 at 13:07
I am now seeing you already tagged gsap in your question... godspeed! — JRT
– JRT, Commented Jun 2 at 13:26
You don't really need Nuxt or Next for that, just use vanilla JS with GSAP or even better, some vanilla CSS. Don't make things too complicated. Otherwise, depending on what you want to achieve precisely, there might be a tutorial for such a thing somewhere already. Start small and go incremental. :) — kissu
– kissu, Commented Jun 2 at 13:47

Rodrigo · Accepted Answer · 2025-06-03 17:20:38Z

You can use GSAP's Flip Plugin:

https://gsap.com/docs/v3/Plugins/Flip/

This demo could help getting started:

https://codepen.io/GreenSock/pen/NWRxarv

function updateFilters() {
  const state = Flip.getState(items), // get the current state
        classes = filters.filter(checkbox => checkbox.checked).map(checkbox => "." + checkbox.id),
        matches = classes.length ? gsap.utils.toArray(classes.join(",")) : classes;

  // adjust the display property of each item ("none" for filtered ones, "inline-flex" for matching ones)
  items.forEach(item => item.style.display = matches.indexOf(item) === -1 ? "none" : "inline-flex");
 
    // animate from the previous state
    Flip.from(state, {
        duration: 0.7,
        scale: true,
        ease: "power1.inOut",
        stagger: 0.08,
    absolute: true,
    onEnter: elements => gsap.fromTo(elements, {opacity: 0, scale: 0}, {opacity: 1, scale: 1, duration: 1}),
    onLeave: elements => gsap.to(elements, {opacity: 0, scale: 0, duration: 1})
    });
  
  // Update the all checkbox:
  allCheckbox.checked = matches.length === items.length; 
}

Collectives™ on Stack Overflow

How to build a smooth animated filter section like this Nuxt.js/Vue.js website?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related