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