Reverse animations on second tap.

Hey @uconic,

playing an animation on click (and reversing it when clicked again) is not currently supported by this plugin.

However, I put something together, so you can use it as a workaround for your specific use case:

1. Disable the following options: “Autoplay”, “Loop”, “Reversed”, and “Play on mouse over”.

2. Add an Elementor “HTML” widget to your page with the following code:

<script type="text/javascript">
((animName) => {
    let direction = -1;
    jQuery('div[data-name="' + animName + '"]').on('click', () => {
        direction *= -1;
        lottie.setDirection(direction, animName);
        lottie.play(animName);
    });
})('animentor-lottie-anim-xxxxxxx');
</script>

3. Replace animentor-lottie-anim-xxxxxxx with the name of your animation. You can find this by inspecting the element (for example, on Google Chrome you can right click and select “Inspect”) and looking for the data-name attribute. In the page you provided that is animentor-lottie-anim-e777cb8

Let me know if that works for you.

I like your use of a Lottie animation as a toggle button, so I’ll definitely keep it in mind for future updates ??

I’ve also opened an issue on the plugin’s GitHub repository (#8), so you can follow its progress there.

• This reply was modified 4 years, 11 months ago by overengineer.
• This reply was modified 4 years, 11 months ago by Jan Dembowski.

Thank you for this! I will give it a try.

There are so many Elementor users looking for a solution to this, so implementing it would be a great idea!

Cheers, Micky

Hi!

I have the same problem as the OP, but for some reason I can’t find Lottie animation’s data-nameattribute you mentioned. I’ve used the option to upload the JSON file. There’s not the option to disable autoplay anymore.

Seems like you’ve updated the plugin since OP’s request?
How could I achieve the same result now?

Thank you! ??