I’ve made a small animation for my navbar in After Effects, where the hamburger switches to become a cross. I’ve used Bodymovin and have brought it into Webflow (which is hugely exciting :D)
However, I can’t work out how I’d now get the animation to play on click and then stay at the last frame, until clicked again to then play backwards…
HI @MotionMan
are you using one animation that goes from State 1 to State 2 to State 1? or separate animations?
With firs option all you have to do is place the lottie in to a div where the hamburger should be and add a click animation to the div (not the lottie) and then you make 2 animations:
1 . Click One - select the lottie and set the initial state on the frame you like [X1] and tell it to go to frame [X2] in [Y] amount of time.
2. Click 2 - select the lottie and tell it to go to frame [X3] in [Y] amount of time (then you should add a last step that should be after the last animation and take 0 seconds where you tell the lottie to go back to frame [X1] so it can start again…
My animation is set up as hamburger at the start, then the little animation as it turns into a cross. So state 1, to state 2 (thinking I could play it backwards)
However, if the animation needs to be state 1, state 2, state 3, then that’s no problems also