Streaming live at 10am (PST)

Dynamic filtering using Mixitup3 - Change the animation?

Read-only link here

We added a filter option using MIxitup3. It was the easiest way we found using this blog: https://webflow.com/blog/dynamic-filtering-and-sorting

However, we actually don’t really like this enlarge animation when an item is part of the selected filter category, or the shrink animation when the item isn’t part of the selected category.

We are hoping to have the fade in/out and shuffle effect instead (shuffle effect to the left and/or to the top if there’s an empty grid space). We don’t know anything about coding, so don’t know if we can simply tweak the existing code. And, if we do need to re-do the whole filter, how we can do so.

Hopefully someone here can assist us.

Thank you :slight_smile:

I just had the same question and figured it out!

If you go to the official MixItUp website there’s a sandbox that you can use to change the animation style. The “settings” icon at the top right lets you adjust options like fading, moving, rotating, etc. Change the settings and then click the filters at the top left to see them in action.

When you’re happy with the animation settings, click the “Export config” button in the settings panel. Copy and paste the config to your code. I followed the same blog post so the end of your code will look like this after pasting your config:

*// 6) Call the MixitUp plugin*
  mixitup(containerEl);

{
    "animation": {
        "duration": 250,
        "nudge": false,
        "reverseOut": false,
        "effects": "fade translateY(20%) stagger(30ms)"
    }
}

    </script>

However, we’re not done yet. We need to attach the options we pasted in to the mixitup call. Do so by removing the ); from mixitup(containerEl); and adding a comma,

Now your code should look like this:

*// 6) Call the MixitUp plugin*
  mixitup(containerEl, {
    "animation": {
        "duration": 250,
        "nudge": false,
        "reverseOut": false,
        "effects": "fade translateY(20%) stagger(30ms)"
    }
}

    </script>

Still not done though. Three things.

  1. We need to mark the end of the code properly by closing everything up with the ); we removed earlier.
  2. For some reason, the sandbox doesn’t give you the right syntax. It gives you extra quotations where you don’t need them and that breaks the code. To fix it, remove the double quotations around the properties like “animation”, “duration”, “nudge”, “reverseOut”, and “effects”.
  3. In the effects property, there are also double quotations. Change these to single quotations.

So now your code should look like this and it should work!

*// 6) Call the MixitUp plugin*
  mixitup(containerEl, {
    animation: {
        duration: 250,
        nudge: false,
        reverseOut: false,
        effects: 'fade translateY(20%) stagger(30ms)'
    }
});

    </script>
2 Likes

You’re AMAZING!!! :clap:t2: :clap:t2: :clap:t2: :clap:t2: :clap:t2: Thank you for such a detailed explanation. Pretty sure we would have just copied the code and then scratch our heads endlessly wondering why the code wasn’t working had you not explain the second half!!

THANK YOU :grinning:

1 Like