Jump to content
Search Community

ScrollTrigger refresh scroll positions after previous animation?

fionchadd test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

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...