Join the Webstudio community

Updated 6 months ago

How Can I Make an Lottie Animation Hamburger Work for My Nav?

At a glance

The community member is trying to make a Lottie animation hamburger work for their navigation menu. They have tried embedding the Lottie script, but are unsure how to visually place it. Another community member suggests using GSAP to trigger the parent of the embed (menu button) to play the Lottie animation both ways. The community members discuss that Lottie is a script provided for HTML embed, and that they can use a click function to play the Lottie file by its class name or name. They also mention that Lottie has a JavaScript API that they would need to use to start and stop the animation when the user clicks on the embed or the parent element.

Useful resources
How can I make an Lottie animation hamburger work for my nav?
O
p
10 comments
have you tried using embed and inserting lottie script?
Yes but I didn’t know how to visually place it
I made an embed and put the Lottie JSON in de embed in script tags
Now I want to use gsap to trigger the parent of the embed (menu button) to play Lottie both ways
lottie animatino is just a script that they provide for html embed
Okay so I can just make a click function to play the Lottie file by its classname / name?
ok so what you asked is how to start/stop lottie animation when user clicks on it?
When clicking on the embed or better the parent element (for some padding, better touch experience)
lottie has a js api that you would have to use https://airbnb.io/lottie/#/web
Add a reply
Sign up and join the conversation on Discord