Jump to content


Start tween at given point in viewport?

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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!




Here are the two examples:


See the Pen orgjMb by RaoulUnger (@RaoulUnger) on CodePen




See the Pen OeVVGP by RaoulUnger (@RaoulUnger) on CodePen

Link to comment
Share on other sites

17 minutes ago, RaoulUnger said:

but I don't like the fact that the animation speed itself is determined by the scrolling speed.


Just delete the duration of 90% in your scene parameters and then the actual tween duration will be used.


Happy tweening.


  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Wow, works perfectly - that was so much easier than I feared it would be!

I've updated the codepen - thanks a lot!


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.