fionchadd Posted December 10, 2021 Share Posted December 10, 2021 Hi there I'm trying to build something at the moment and I can't get it working quite right. The desired behaviour is this: On page load, the first text section scrolls up over the top (red) section. This is done by reducing the margin at the top of the text section. Then as you continue to scroll down the page, the content of each subsequent section fades into view when it's in the viewport. Currently the content of subsequent sections is fading in much later than it should. I think what's happening is that ScrollTrigger is calculating the position of the rows before the initial scrolling animation, and then when the first section has scrolled up, it thinks the rows are in different places to where they are so they trigger much later. Is there a way to construct this so that ScrollTrigger fetches the row positions after the first animation has completed? I tried using ScrollTrigger.refresh() at the end of the loadingAnimation but that didn't seem to help. Any advice would be gratefully received! Thanks Hannah See the Pen dyVpWKz by fionchadd (@fionchadd) on CodePen Link to comment Share on other sites More sharing options...
Solution OSUblake Posted December 10, 2021 Solution Share Posted December 10, 2021 Hi Hannah, You should not be creating ScrollTriggers inside a refresh listener. And to reference a function in callback, you shouldn't have parentheses as that will call the function immediately. Is this what you are trying to do? See the Pen yLzaPzV by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
fionchadd Posted December 11, 2021 Author Share Posted December 11, 2021 Hi Blake, That's exactly what I'm trying to do! Thanks so much Hannah 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