Jump to content
Search Community

ScrollTrigger: element gets pinned too early

Théophile Avoyne test
Moderator Tag

Recommended Posts

Hi guys,

 

I'm facing a problem using ScrollTrigger. I have two consecutive "sections", that are both 100vh. They both have a ScrollTrigger instance attached to them and get pinned consecutively. The second section is supposed to get pinned when the first one gets unpinned. However, sometimes, the second section gets pinned before it's supposed to, thus appearing in the middle of the screen, with the first section behind it. I don't believe it is a spacing problem as, beside this, everything is laid out as expected.

 

I recorded a video that illustrates the issue : 

 

Here's the link to the above website: https://black-jelly-portfolio-v2--gsapforum-jsy1cc20.web.app.

 

The weirdest thing is that this behaviour is not observable all the time. If I refresh the page it disappears and comes back later.

 

Any idea what's happening?

Link to comment
Share on other sites

Hello there,

 

Try if anticipatePin will help you, even though it sounds you are experiencing the reverse :)

Also debugging your code from the actual webpage is harder than doing so from a minimal demo.

Additionally in the process of creating a minimal demo, most often people figure things out by themselves.

 

 

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

image.png.75fcb2c6a7628c6dddca8e328631e770.png

Link to comment
Share on other sites

Hello @tailbreezy,

 

Thanks for your answer. anticipatePin doesn't seem to solve the issue.

 

I usually do a minimal demo. However, because the error doesn't show up constantly, I struggle to identify the origin of the problem, which makes it hard to reproduce, hence the minimal demo would be ... the entire website. I did my best to provide as much info as I could. I'm not asking for a full fix of my code, but only for an idea/advice on where the problem might come from.

Link to comment
Share on other sites

Hey Théophile. My guess based on the video is that the second ScrollTrigger is initialized before all of the content is loaded sometimes. So when the additional content loads fully it gets taller and makes the position of the second ScrollTrigger incorrect. If you have any content loaded after the start of the page (images, things via AJAX, etc.) make sure to call ScrollTrigger.refresh() after it. But without a minimal demo it's impossible for us to say what the issue is for sure.

  • Like 2
Link to comment
Share on other sites

Hello @ZachSaucier, thanks a lot for your help. However this is not the problem.

 

I believe that it has something to do with the fact that, using pin: true, the padding that is added to the .pin-spacer is added asynchronously (like gsap.set() and setTimeout(fn, 0) do). I'm using ScrollTrigger inside of a React app. Both the sections I mentioned are independant React components. The two pieces of ScrollTrigger code run inside useLayoutEffect() hooks. The useLayoutEffect() hook garanties a synchronous execution of the code (which is what we need here I believe). However, because the padding is added asynchronously to the spacer, the second component (the glitchy section) ends up being mounted before the first one has received the necessary padding. Hence the second scrollTrigger instance receives an erroneous positioning information.

 

My question is : GSAP, why not having the padding added synchronously to the spacer when the ScrollTrigger is instantiated?

 

The only workaround I have is to use pinSpacing: false and to deal manually with adding the necessary spacing myself. However, I believe that I'm not the only one who could face such a situation.

Link to comment
Share on other sites

18 minutes ago, Théophile Avoyne said:

My question is : GSAP, why not having the padding added synchronously to the spacer when the ScrollTrigger is instantiated?

 

 

Hello,

It is hard to tell without a demo, but have you tried to adding your scrollTrigger on nextTick().

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...