Trigger lottie animation from separate button

Design help Animations & Interactions
1

Hi,

I’m just trying to work out if it’s possible to trigger a lottie animation from a click elsewhere on the screen?

I have a logo on the top left of my navbar that is a lottie animation, but I want the trigger to be when someone clicks the hamburger on the right hand side.

Also a separate issue; I have currently got it set up so that you can trigger the animation by clicking on the lottie animation (not what I want), but part of the problem is that once the animation plays, it disappears until second click (when it plays in reverse). Why is this?

https://rl-brand-site.webflow.io/

https://preview.webflow.com/preview/rl-brand-site?utm_medium=preview_link&utm_source=dashboard&utm_content=rl-brand-site&preview=4578899192b0294bc0986521618ccc4b&workflow=preview

2

Assume this isn’t possible?

3

Hi,

Your lottie animation is probably in the last (mili) second white. This isn’t something you can fix in Webflow. Lottie has an editor built in on their site. Shorten (edit duration) the .lottie file and your good to go.

If you want to play the lottie animation when the burger nav is clicked, you should work with the class of the hamburger (or selected element). In the hamburger-nav-trigger animation, you can select the lottie file and edit the animation just how you like.

0% is the start
100% is the end of the lottie animation

set the duration, deselect “loop”

Cheers,

Max Zijlstra

1 Like
4

That’s fantastic; I shall give it a go.

Many thanks
Chris

5

Hi Max,

I’ve managed to fix the Lottie animation so that it doesn’t disappear - just had to extend the timeline by an extra frame in After Effects.

I am still struggling to get the hamburger button to trigger the animation though. Any thoughts on what I’m doing wrong?

Link to is same as previous: https://preview.webflow.com/preview/rl-brand-site?utm_medium=preview_link&utm_source=dashboard&utm_content=rl-brand-site&preview=4578899192b0294bc0986521618ccc4b&workflow=preview

6

Hi Chris,

You already made the trigger. Now you can select the dropdown underneath “on 1st click” the action “start animation”.

Name it something like “lottie menu animation” and now you can add the animation.
-Click on the Lottie-logo (make sure you’re still in the burger-nav-animation-editor
-Click “+” and select “lottie”
-Set its initial state 0%
-Click “+” set state to 100% and add the duration of the animation (make sure the lottie animation is still selected)

(if your still getting a blank animation when its done > set the state to 99%)

Greetings from Holland,

Max

7

Max,

That’s super helpful - It’s now working, thank you so much.

Now the only issue is that it is also triggered by simply clicking on the icon. How do I stop it from doing that?

8

This is because your icon has a different animation :slight_smile:

9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.