Hi all,
I would like to be able to give a class to elements (images in my case) that makes them invisible at first, and then fade-in from the left once they reach a certain point in the viewport, using Greensock. The animation effect i'm looking for is shown in example 1 (a given start position, speed and ease). However, this is not tied to a viewport position so all elements animate at the same time. In example 2 (loosely based on a codepen i found, including Scrollmagic) all elements do fade in from the left only when it's their turn, but I don't like the fact that the animation speed itself is determined by the scrolling speed.
So basically i'm looking for a way to trigger the start of the animation of example 1, tied to a given position in the viewport as shown in example 2. I'm not sure if the use of Scrollmagic is implied at all.
Could anyone perhaps point me in the right direction? I'm pretty new at Greensock, and i've tried to figure out the answer by searching through a lot of codepens and trying out all kinds of solutions, but I don't seem to find the right way!
Thanks!
Raoul
Here are the two examples:
https://codepen.io/RaoulUnger/pen/orgjMb