Streaming live at 10am (PST)

After Effects Icon Animation

Hello all,

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…

Can anyone help me with this?

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…

I think this should do it…

Hey IVG,

Thanks very much I’ll give this a shot.

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 :ok_hand:

Ollie