How to make the hamburger menu lottie animation in Elementor change to a cross when clicked and back to hamburger when clicked?
For one of my clients, I was troubleshooting a way to make sure that when the hamburger menu lottie animation was clicked (first a pop-up popped up with the menu), a smooth animation would follow that converted the icon to a cross. After another click, it would then change back to the hamburger icon again. I've researched all over the internet but haven't found a suitable solution. Eventually, however, ChatGPT helped me out by modifying the code. Here is his revised version of the code that you can use.
Enjoy it!
Demonstration
Before inserting, name your lottie with the CSS class "trigger-on-click".
Code to insert into the HTML Element