Streaming live at 10am (PST)

How to use a lottie animation + Button Hover or Click - to trigger an animation

Hi There,

I need some help. I am looking to make 3 buttons (or div blocks) that when user hovers over them, it will tigger the right animation.

Eg. the three buttons are - Explore - Redeem -Save
I have created an animation, which is an iphone, and it has three screens. When the mouse hovers over Explore - i want to link the trigger to show the right screen on the phone, plus have text come on the side. When you hover on Redeem, the phone doesn’t move, just the animation slides to show the corresponding screen, and then the corresponding text show up, and when you hover over save - the phone screen changes to the corresponding screen and the text on the right of it changes too.

Here’s an example of what i mean - If you scroll down to the Get Your Headspace section - the action is triggered by a click - which I also don’t mind doing. I just don’t know how, any help is appreciated.

Can you post your project link?

Hey Bryan,

I’m just fiddling around with it at the moment. Do you know if there’s a better guide. I guess for i should add i’m cool with it being a slide show - but i want to customize the buttons, and have the animations similar to the link i posted before.