Jump to content
Search Community

Creating a timeline and then scrolltrigger

gem test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello! On page load I am trying to create am animation where certain elements fade in. On these same elements I have a scrolltrigger that moves the elements around and animates the opacity to 0. Each animation works without each other, but when trying to run both it does not work.


After the initial fade in, once the user scrolls the elements disappear.


Any help is greatly appreciated. Thank you!

See the Pen ZEmaqJV by bonfiremitch (@bonfiremitch) on CodePen

Link to comment
Share on other sites

  • Solution



A few things. First and foremost is the fact that ScrollTrigger has a configuration option called immediateRender. This basically tells ScrollTrigger to not render the GSAP instance immediately which is causing the problem. To make it short when your code runs the boxes have an opacity of zero, so when it first renders that instance (the one controlled by ScrollTrigger) takes that as the starting point of the animation, so basically GSAP is taking the elements from opacity 0 to opacity 0, so as soon as you scroll a bit, they disappear. Is not a bug just the way things work and why the immediateRender option is handy in these cases.


Another thing is that you can create a single GSAP instance for both cases and no need to create a separate ScrollTrigger instance for each element. In the case of the first animation you can use stagger to separate each instance:



In the case of the ScrollTrigger instance you can use function based values which in the case of an array will loop through the elements passing the index to a function.


Here is a fork of your codepen:

See the Pen WNYXYVb by GreenSock (@GreenSock) on CodePen


Hopefully this helps.

Happy Tweening!

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.
  • Create New...