Jump to content
Search Community

Issue with ScrollTrigger positioning on refresh

DesignedByJames test
Moderator Tag

Go to solution Solved by DesignedByJames,

Recommended Posts

Resolved since posting - resolution below...

 

Hello... 

 

Fairly new to GSAP and loving it!!

 

I have a section that is simulating a horizontal scroll and using containerAnimation to do this.

 

When I load the page on empty cache, it works perfectly, positioning and everything is great. Then I reload the page and the positioning seems to be out if I viewed the animation on the previous section. I then have to clear cache again to view the animation with the correct positioning.

 

I have made a video here:

https://drive.google.com/file/d/1OVNzPFqJcGOB9S10wMVIkW8tromBvSBw/view

 

As you can see, on the first load, I scroll down to the 'our work' section and it looks good. I then refresh the page and it knocks the positioning out then the third time I clear the cache and once again the positioning is good.

 

I'm really at a loss with this so any input would be great, perhaps someone else has come across this or someone a little more used to GSAP can point me in the right direction?

 

I added the CodePen and seeing the same issue here - please view in full screen though as I havent yet worked out the responsiveness fully so works best at 1080 :)

 

One thing I did try adding was ScrollTrigger.refresh() to see if this helped but didn't get anywhere with this unfortunately.

 

Thanks in advance for your input

See the Pen BaYpJQj by j-leist (@j-leist) on CodePen

Edited by DesignedByJames
Stated that it has been resolved
Link to comment
Share on other sites

  • Solution

Found the issue - I was using ScrollTrigger.maxScroll and this was giving different values. On refresh with empty cache this was equal to the width of the window which works perfect for this animation so I swapped it out to use the window width instead of ScrollTrigger.maxScroll

 

I wonder if someone seeing this though might elaborate as to why ScrollTrigger.maxScroll would give a different value on a refresh?

Link to comment
Share on other sites

Hi @DesignedByJames. Welcome to the forums. 

 

I think you might be misunderstanding what ScrollTrigger.maxScroll() is for. That is for finding the furthest you can scroll that particular element - NOT how far you'd scroll the main page to reach that element. In other words, let's say you've got an element whose width is 500px but it contains content that is 600px wide - maxScroll(yourElement, true) would return 100 because that's the furthest you could scroll. 

 

Does that line up with your understanding? 

 

The only reason that value would change is if the content dimensions changed, like perhaps images loaded and the browser adjusted things according to the size of those images.  

  • Like 1
Link to comment
Share on other sites

3 hours ago, GreenSock said:

Hi @DesignedByJames. Welcome to the forums. 

 

I think you might be misunderstanding what ScrollTrigger.maxScroll() is for. That is for finding the furthest you can scroll that particular element - NOT how far you'd scroll the main page to reach that element. In other words, let's say you've got an element whose width is 500px but it contains content that is 600px wide - maxScroll(yourElement, true) would return 100 because that's the furthest you could scroll. 

 

Does that line up with your understanding? 

 

The only reason that value would change is if the content dimensions changed, like perhaps images loaded and the browser adjusted things according to the size of those images.  

Thanks - yes that is my understanding of it.

 

I wasn't sure why that value would change though but think as you say, it's just the content loading in from cache giving a different value.

 

Either way, all sorted :)

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