Lottie interaction with button help

Heyya!

There is an effect I would like to achieve and I have two problems.
The effect is that I would like a lottie bird animation to fly in and land on a button when the page is scrolled there and then stay there indefinitely.
Then, when the button is pressed, I would like the bird to fly away.

My two problems:

  1. I sort of made it work with an element trigger to the button playing the lottie animation till it lands. Then I made a hover out animation that just stays on that last frame. So far so good, as I scroll down the animation comes in, lands and stays there. Then I made an element trigger to the button to animate the lottie out when pressed. But when I scroll up and down again, it starts at the hover out animation (so the bird is sitting there already.)
    How do you properly set up a scenario like this? (Would be nice if it were to only happen once)

  2. Can you put the lottie animation in front of the button somehow and still click the button? So that the graphic could overlap it. So far I had to Z index the animation behind the button.

(I think what would solve this issue is a way to have the animation freeze on the part where it sits on the button, but currently I have to make a scroll out animation but that interferes with the others…)

Thanks !


Here is my public share link (Old-Home):
https://preview.webflow.com/preview/fioka-animation?utm_medium=preview_link&utm_source=designer&utm_content=fioka-animation&preview=f9aaec10cf95d3268d7b090acdcc4b39&pageId=62a310458e1ea46684e1ab4e&workflow=preview

1 Like