Wrong pin position on initial load (Barba + Locomotive)

[Ocamy]

Hi, i encounter a problem trying to use Locomotive Scroll and Barba, the pinned section is in wrong position on the initial load, but after going to next page and coming back it works fine. I've combined to demos that i found to show the problem.

 

https://codesandbox.io/embed/smoosh-hill-qb6er4?fontsize=14&hidenavigation=1&theme=dark

 

LE: By providing the demo i found out that resizing the window (in codesandbox) it works fine but i still don't know how to solve it.

 

The actual question: how can i add ScrollTrigger.refresh() without resizing the window?

[akapowl]

Hello @Ocamy

 

The problem is that you create your ScrollTriggers onComplete of your tlLoaderIn timeline.

 

At this point in time the '.site-main' is not where you'd expect it to be compared to when the page is 'fully loaded' (meaning when the loader-animation is fully complete here) because after the tlLoaderIn timeline, you fire the tlLoaderOut timeline, which contains a .from-tween on the '.site-main's y - so at the point of creation of the ScrollTriggers, the content willbe in a different place than it is after the completion of everything - thus the ScrollTrigger doesn't fire where you expect it to.

 

You have different options here: either call a ScrollTrigger.refresh() after the loader animation is fully complete or make sure to create the ScrollTriggers after the loader animation is complete to begin with - for both options you could e.g. use the onComplete callback of the tlLoaderOut timeline.

 

I opted for the ScrollTrigger.refresh() option in the demo linked below, just to quickly show the difference with regard to the ST pinning in the 'correct' place now.

 

Also it is on Stackblitz instead of codesandbox because I personally am not getting warm with how to properly use codesandbox 🤷‍♂️

 

https://stackblitz.com/edit/web-platform-toxfca

 

What you will notice now, is that since the image also is attached to a ScrollTrigger, there will be a jump - because it will jump into the position where it is supposed to be at that point according to the ScrollTrigger, so the next challenge for you will be to find a way to work around that - which I currently can not give you any advice on for how to tackle that problem.

 

[akapowl]

 

The quickest workaround to the image-jump problem would probably be to just leave the creation of the ScrollTriggers where you have it currently and instead of calling ScrollTrigger.refresh() in the onComplete callback of the tlLoaderOut timeline, call it in the onUpdate callback of that timeline.

 

Now since the .refresh() is a rather costly operation, it may not be the best idea to do it onUpdate of that tl because it might cause performance issues, but I actually did not notice much of a difference in the demo linked below, if any - of course your mileage may vary. Other than that I think you might have to somehow 'manually' calculate where to tween the image to in between, so it would end up at the exact position where the ScrollTrigger's progress would set it to when things have settled.

 

https://stackblitz.com/edit/web-platform-guoahm

 

Welcome to the GreenSock forums by the way

 

As a sidenote:

I would highly recommend to update your GSAP / ScrollTrigger to the latest versions because the version 3.4.2 that you are using in that demo of yours is rather old and by now (the latest is 3.10.4) there have been heaps of new things integrated and lots of bugs fixed.

 

Since version 3.10 GreenSock also has its very own smooth-scrolling plugin for club-members - ScrollSmoother.

Maybe have a look and see if it could be a suiting replacement for locomotive-scroll for you - it sure is awesome.

 

[Ocamy]

This is incredibly helpful. It worked by creating the scrolltrigger animations after the loader animation (obviously 😅 ).

Thank you so much!