ScrollSmoother breaks Scrolltriggers

[Nick.Ls]

Hey everyone,

 

I was creating a similar section in my project like the one I am attaching below:

 

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

 

and it worked just fine until I imported ScrollSmoother. Adding smoother seems

that it breaks the end points (?). Attaching codepen with smoother added as

reference too.

 

 

P.S. In my website setting the pinSpacing to true seems to make things a bit better but still out of sync.

 

Any ideas? Thank you in advance!

See the Pen RwJzgPg by Nick_Ls (@Nick_Ls) on CodePen

[Nick.Ls]

Another finding is that the ending height is not calculated correctly when I hard clear cache on browser which breaks things instead of a simple

refresh where I get the right height to scroll...

[Rodrigo]

Hi,

 

Everything seems to work in the exact same way with or without ScrollSmoother in the mix:

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

 

I made a few tweaks in order to give scroll space before and after the cards section and removed the margin in the body tag (I would recommend not to do that). If you comment-out the ScrollSmoother section of the code the markers are in the same position and everything works in the same way.

 

Maybe I'm missing something here, but everything seems to work the way is supposed to. If the example above is not working for you, please be more specific about what you intend to do.

 

Happy Tweening!

[Nick.Ls]

Hi @Rodrigo,

 

Thanks for your reply. You are right in most of it. Giving it some space indeed works better. The margin on body top is just some space which I don't actually use in my live project.

 

I have tried the above setup with infinite variations ( 😋 ) at this point to make it work in the most optimal way but in every situation I keep coming across with the same problem. The scrolltrigger height is not calculated properly in every refresh of the page.

 

Same applies to your codepen too... Check the image I am attaching below.

 

 

The 3rd card does not pin exactly at the same position as the others and the Scrolltrigger end event fires a bit sooner giving us with the above result.

Refreshing the page you'll notice that it fixes the problem but refreshing the page is not a solution.

 

I was thinking of a doc ready function before initialization in order to have the content loaded before letting the scrolltrigger calculate the height might work...

 

Any other ideas?

[Nick.Ls]

Giving a solution on the problem if someone ever comes up with something similar.

 

On ideal scenarios page load speed, DOM elements, js files etc run optimal or are precached so the scroll will occur as intended. On the other hand it looks like in a real scenario the images I have placed create the scrolling height and all the elements must be already loaded to calculate everything correctly. Therefore I used imagesloaded.js where I run the scrolltriggers AFTER the images on the section are loaded and everything works like a charm.

 

Hopefully it can be a solution to someone else too out there.

 

Once again, thanks @Rodrigo for the time spent looking into it and this amazing community / forum!