sacco195 Posted January 13, 2022 Share Posted January 13, 2022 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 More sharing options...
GreenSock Posted January 14, 2022 Share Posted January 14, 2022 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 4 Link to comment Share on other sites More sharing options...
sacco195 Posted January 14, 2022 Author Share Posted January 14, 2022 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now