Timeline & ScrollTrigger after page reload on the mid of the page

[Solbeg]

I've added anchors to each section with text

Everything works fine when I just load a page, but if I need to jump the anchor, everything crashes

It works almost correct, but scrrollTrigger doesnt work correctly after anchors page reload (wach attached video)

it seems to me that it does not update the position of all elements after the page has been loaded

 

 

 

See the Pen jOeMyPw by AnnaShubskaya (@AnnaShubskaya) on CodePen

[Rodrigo]

Hi,

 

Sorry about the issues. Is really hard for us to find an issue based on a short video.

 

There are a few things I can suggest. First try ScrollTrigger clearScrollMemory method:

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.clearScrollMemory()

 

Another option is to check that you're using the latest version of ScrollTrigger (3.11.5). If you are maybe give the next beta release a try:

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

Finally if you are using some type of framework that handles routing on it's own like Next, Nuxt, etc. you can check the hash in it, scroll to the top of the page and once the ScrollTrigger instances are created scroll to the position of the anchor.

 

Unfortunately is really hard for us to help without a minimal demo and the codepen example you provide is working as expected.

 

Sorry I can't be of more assistance.

Happy Tweening!

[Solbeg]

@Rodrigo

Tnx for your reply!

I've done a demo for you in codesandbox

https://codesandbox.io/s/timeline-scrolltrigger-after-page-reload-on-the-mid-of-the-page-5t33zj

 

I've tryed clearScrollMemory, but still have this issue

And also I'm using the latest version of ScrollTrigger

My project built on Wordpress, there is no frontend frameworks

[Rodrigo]

Hi,

 

I think the problem here could be on the hash being passed in the href attribute and the window going to that particular scroll position before ScrollTrigger has made all the calculations. Honestly I've never done something like that in an anchor link, mainly because I've been working with frameworks that handle routing for you for many years now.

 

What I could suggest it find a way to prevent the window from going to the hash section as soon as it gets there. Then run the JS code in order to create the ScrollTrigger instances.

 

If that's not possible I'd try to add something else to the href like a query or something like that in order to look for that and with that parameter in the location you won't have to worry about the window going to the hash section before ScrollTrigger makes all it's calculations and once everything is done, you can use the ScrollTo Plugin to go to the particular location.

 

Unfortunately this is more a custom logic problem than a GSAP related one and we don't have the time resources to create custom examples for our users. If you want you can post in the Jobs & Freelance forums and request help there.

 

Good luck with your project!

Happy Tweening!