Conversation
supportHi there, first of all – lovely lightweight plugin to add lotties, so thank you for that! I try to use it to toggle a menu on mobile, but I don’t find a solution to have the lottie reverse on second tap. (mouseclick). Is this feature somehow accessable? Thank you! 🙂 The page I need help with: [ log in to see the link]
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 6 years, 1 month ago by overengineer . This reply was modified 6 years, 1 month 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-name attribute 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! 🙂
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 6 years, 1 month ago by overengineer . This reply was modified 6 years, 1 month 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-name attribute 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! 🙂