search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.58k stars 2.87k forks source link

Ease out scroll effect #1960

Open Brianmills077 opened 4 years ago

Brianmills077 commented 4 years ago

Hello guys,

I am trying to achieve a parallax effect based on the scroll. What I have so far is this page from here: https://drive.google.com/drive/folders/1WkaI5D8ZgHRmYga11LtEylh3Ryhiwvj4 Here is a link to the effect I’m trying to achieve: https://revolution.themepunch.com/ Here is an explanatory video: https://www.loom.com/share/d4252b16b87a48ba9607354aff28b190 Kind regards

bodymovin commented 4 years ago

Hi, what is it exactly that you need help with?

Brianmills077 commented 4 years ago

As I explained above, I want to create an animation triggered by a scroll which will have an ease-out effect. For example, the time needed for the text to move down is from sec 0 to 1. I want my animation to move from point A to point B from sec 0 to 1 and from sec 1 to 2 to have an ease-out effect. Like a movement delay. Kindly take a look at this example:https://revolution.themepunch.com/. Once the text stopped the movement, the animation has a slightly delay effect (ease out).

What I need help with is a code section that would help me achieve this result. You cand find here what I have so far: https://drive.google.com/drive/folders/1WkaI5D8ZgHRmYga11LtEylh3Ryhiwvj4

bodymovin commented 4 years ago

It seems this is beyond the scope of the library. If you need to change the progress of the playback, you can try a library like GSAP to control the animation itself.

ofmarconi commented 3 years ago

@Brianmills077 Did you find a solution?