Jump to content


Initial state set to end until animation triggers

Recommended Posts

New to GSAP and loving it so far. Hoping this is a quick question. 


I am using scrollTrigger to have a text  element fade/slide on, and then it slowly fades out as the page scrolls down. What I am finding is that the element appears initially in its final state (opacity 1) until the first action is started, then it jumps to opacity:0 and continues as expected. 


If you scroll down slowly when the page loads, you can see the text until the animation triggers.


I've tried setting the opacity of the item to 0 with CSS, and also using gsap.set on the page load. Neither seems to effect this. 

See the Pen ExwGvMq by sacco195 (@sacco195) on CodePen

Link to comment
Share on other sites

That's actually a very tricky scenario because you've got multiple ScrollTrigger-based animations that are affecting the same property of the same element. ScrollTrigger must refresh things from top to bottom, thus in your scenario you've got a scrubbed, pinned timeline that has a STARTING opacity of 1 on that element thus when it refreshes and you haven't scrolled past its start, it will render that timeline at its starting value (opacity: 1). See the issue? It's not a bug or anything in ScrollTrigger - it's just the nature of the logic and the way you've set things up. 


It's exceedingly rare, though - this is the first time I've seen this come up in fact. 


You can work around it by running some code in an onRefresh() of that 2nd ScrollTrigger to force the opacity to the value you want it to be (but you'd only want that to happen if the user hasn't scrolled into the one before it which is ALSO controlling its opacity). 


Is this what you're looking for? 

See the Pen dyVwjKQ?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

This is EXACTLY what I was looking for. Thank you for the very quick, very thorough reply. It also really helped me understand how everything works much better. 

  • Like 1
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.