Detect element position in tween on page load, scrollTrigger

[IcarusD]

Hey guys,

I'm building a site that relies heavily on GSAP & ScrollTrigger to move 100vwx100vh fixed containers / elements in and out of the viewport.
The problem I have is for whatever reason the page doesn't always start at scrollTop = 0 (even by trying to force it), in this case the elements with attached scrollTriggers don't detect their position in the tween and instead just appear in their initial static position.
Is there a way to have these elements detect their state along the tween from scrollTrigger relative to the scrollTop on page load?
Hopefully that makes sense.

Thanks!

[Rodrigo]

Hi @IcarusD and welcome to the GreenSock forums!

 

There is not a lot we can do without a minimal demo. Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependencies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

If you want to force the scroll position to be at the top of the page you can use ScrollTrigger's clearScrollMemory method:

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

 

Just add this at the start of your custom JS file:

ScrollTrigger.clearScrollMemory("manual");

Finally make sure to be using the latest GSAP and ScrollTrigger versions (currently 3.12.2).

 

Hopefully this helps.

Happy Tweening!