Scrolltrigger on reload problem (Sveltekit)

[Pavel Stianko 2 Likes (Newbie)]

Sometimes, when I reload the page, the website scrolls back to top. If I remove scrolltrigger it is working fine. Any idea where is the problem? Website url: https://native.doktorklain.cz/multifokaly. I am using latest Sveltekit and Gsap.

 

 

 

 

[Pavel Stianko 2 Likes (Newbie)]

I found out, that the same problem is at other people projects as well - like https://github.com/firasel/Gsap-Animation

[Rodrigo 5,885 Likes (Superhero)]

Hi @Bitworks and welcome to the GreenSock forums!

 

Maybe you could try ScrollTrigger.clearScrollMemory() method:

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

 

If you keep having issues, please provide a minimal demo. You can fork this starter template:

https://stackblitz.com/edit/sveltejs-kit-template-default-unljf6

 

Hopefully this helps.

Happy Tweening!

[Pavel Stianko 2 Likes (Newbie)]

Thank you @Rodrigo! I will try the clearScrollMemory and also I will prepare the demo - but it seeems that it is doing this only after build (not in npm run dev). Also I found out that it is working good in gsap@3.11.1, but doing this problem in gsap@3.11.2 and newer.

[Pavel Stianko 2 Likes (Newbie)]

I tried to build and preview the minimal demo and the problem is the same (see the video). I had to slow down the loading using throttling so I can see it more often. So I added ScrollTrigger.clearScrollMemory(); to the top of the page and it is working fine! 🎉 So thank you for help @Rodrigo

 

// prevent scroll jump problem on reload

import { gsap } from 'gsap/dist/gsap';

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

ScrollTrigger.clearScrollMemory();