Custom Checkboxes using Lottie Animation

Hi all and @sabanna :wave:, I’m just needing some quick help understanding how to correctly ‘reset’ custom checkboxes that are using Lottie Animation with the MixItUp Multifilter.

  1. I integrated MixItUp Multifilter.
  2. I cloned some custom checkboxes from another template and they work when you initially check/trigger them.
  3. But the MixItUp ‘reset’ code is unable to reset the lottie animation element, it only resets the checkbox element.

Here’s a read-only link to the test page

And a link to the published page

You can view/try the custom checkbox for “Thailand” at the bottom of the “Tag” column. It works when you check/uncheck it, but the “Clear Filters” button will only reset the checkbox, not reset the lottie animation, which ultimately leads to it being out of sync/in the opposite setting of the actual checkbox.

Screen Shot 2022-07-06 at 9.03.06 AM

My developer skills are somewhat limited and I’m new to lottie animations so I’m struggling to figure out the best solution, not sure if I need to…

  • add a class to the lottie element?
  • add custom js?
  • add additional triggers in the animation?

Would super appreciate any input!

Something that light in my mind, probably can solves the problem, is to add interaction to the lottie when first click, Lottie: from 0% (set as default) to 100 in X sec’s, and for second click back to 0%

@sabanna @RileyJones @vincent I just updated the links to my page above, I realized that my original pages/links got deleted. Still hoping to figure out a solution to this… Many thanks on any time you can give…