ScrollTrigger pinned section problem

[shikari]

Hey.

 

I have a problem with pinned sections.

So there are sections that take 100vh and some other that take more. All of them are mixed. I'm only animating(pinning) those ones which height is 100vh(otherwise it doesn't work as expected:) ). The problem doesn't occur all the time. Sometimes it works smooth but the other time some sections jump or jitter or whatever that behavior is and after them you can find some white space which wasn't set in styles or anywhere else.

Another problem here that if I set any pinned section to pinSpacing: true the next section which is more than 100vh or not animated, would have problems with the height, so you won't be able to see the whole section but just a part of it. Another part is overlapped by the previous section. Not sure if I explained it right, so just check the codepen link  and video link 

 

Another question related to "pin": is it possible to set pinned element with pinSpacing true, but still have the same layering effect?

 

One more question: is it possible to not only set pinSpacing to true but also sort of control the length of scroll. For instance pinSpacing: "1000px", that would mean you scroll 1000px but section doesn't move all that time and only after that length is scrolled starts moving.

I'm also attaching a link with a recorded video where I demonstrate a problem. Cause as I said it doesn't appear all the time.
https://www.loom.com/share/abd8072b96804cf9bd6d2305ed2f308e

 

Hopefully I explained everything correct and you can help me with my problem.


Edit: I need that sort of scroll controlling of pinned section cause I might want to animate something inside the pinned section while scrolling and keep the section at the same place for a while.

See the Pen wvzMxqY by lElfenLiedl (@lElfenLiedl) on CodePen

[ZachSaucier]

Hey shikari. You have quite a few questions there. In general it's best to have a thread be focused on one issue at a time so that we can see the issue clearly and help more pointedly. But I'll try to answer your questions here.

 

1 hour ago, shikari said:

The problem doesn't occur all the time. Sometimes it works smooth but the other time some sections jump or jitter or whatever that behavior is and after them you can find some white space which wasn't set in styles or anywhere else.

This seems to happen when a user starts scrolling before all of the images have loaded. You should either wait to create the ScrollTriggers until the images have loaded or make sure to update the ScrollTriggers once the images have loaded. Not doing so is one of the most common ScrollTrigger mistakes. 

 

1 hour ago, shikari said:

if I set any pinned section to pinSpacing: true the next section which is more than 100vh or not animated, would have problems with the height, so you won't be able to see the whole section but just a part of it.

Yep, that's to be expected because what else could it do? Logically if something can't fit in the viewport, it can't fit in the viewport  You'll have to either adjust the CSS/content so it's in the viewport or add an animation to translate it while it's pinned.

 

1 hour ago, shikari said:

is it possible to set pinned element with pinSpacing true, but still have the same layering effect?

Not if your content is positioned in the document flow.

 

1 hour ago, shikari said:

pinSpacing: "1000px", that would mean you scroll 1000px but section doesn't move all that time and only after that length is scrolled starts moving.

You don't do that with pinSpacing. You do that simply with the start and end properties of the ScrollTrigger. Perhaps you're looking for something like start: "top top", end: "+=1000px".

[shikari]

Hey @ZachSaucier. Thanks for answering all my questions.

I treated my questions as one general issue which is related to pinning elements, that's why asked them all together. In the future will create a separate thread for each question.

I'll go through the most common mistakes and If something is still unclear I will get back here

Thank you

[shikari]

@ZachSaucier
I don't quite get what should I wait for. I'm not doing any ajax/fetch requests. Could you tell me where should I put ScrollTrigger.refresh() if it's needed? Or how else can I solve jumping sections problem

1 hour ago, ZachSaucier said:

 

This seems to happen when a user starts scrolling before all of the images have loaded. You should either wait to create the ScrollTriggers until the images have loaded or make sure to update the ScrollTriggers once the images have loaded. Not doing so is one of the most common ScrollTrigger mistakes. 

 

[ZachSaucier]

Try the window's load event:

window.addEventListener("load", () => ScrollTrigger.refresh());

 

[shikari]

Hey @ZachSaucier.
Thank you for you advice. It helped.

My real project is on React and I initialize my animation inside useEffect/useLayoutEffect(I thought it should work similar to JS "load" event).

The same problem with jumping sections is solved by adding window.addEventListener("load", () => animationFunc()) inside my useEffect/useLayoutEffect. I just don't quite understand why should I use load eventListener inside useEffect, seems it's not a very good solution(but the only one that works so far). I thought useEffect here should work the same as "load", turns out it doesn't.

My question is more related to the knowledge of react lifecycle methods but maybe you have some thoughts regarding that? What am I missing?




 

[ZachSaucier]

Sorry, I don't know enough about React to answer that question. Maybe @Rodrigo has time to step in and provide some info.

[Rodrigo]

Hi,

 

There are a few things that could help, based on Zach's great advice.

 

First general React advices. Try to use the useEffect() hook before resorting to useLayoutEffect, also if you're using useLayoutEffect() I'd recommend passing the dependencies array in order to tell react when to run that code. Also try to avoid using regular CSS selectors and use refs instead, it's safer and you make sure that your elements are actually in the DOM by the time the code runs. Finally create your Scroll Trigger instances in a useEffect() hook with an empty dependencies array and update them either in another useEffect() (with the corresponding dependencies array) or in a useLayoutEffect() (also with the corresponding dependencies array).

 

Second, if the images loading could be causing the problems with content shifting, there are two options: One is to give fixed dimensions to your images to avoid content shifting and use matchMedia to update your scroll instances when those dimensions are updated. The other alternative is to create some loader code, which shouldn't be too complex, you could create a promise-based method and use a Promise.all() in order to create/update the Scroll Trigger instances when all the images that are related to them are fully loaded. Keep in mind that an image element has an onload and onerror events, which can be used to resolve or reject the promise returned by such method.

 

Happy Tweening!!!

[shikari]

Thank you @Rodrigo. I'll follow your advice. Hope they will help me.

 

[shikari]

@Rodrigo Hey again.
Is there any sort of a flag that comes from ScrollTrigger or gsap that I could put into the useEffect dependency array? 
Something that watches for any gsap calculations or elements that I'm trying to animate or anything else and trigger a rerender in case of a change

[ZachSaucier]

@shikari GSAP updates a lot. You probably don't want to do a refresh of things every time GSAP updates. With that being said, every tween or timeline has an onUpdate that you could hook into. There's also GSAP's ticker.

[Rodrigo]

The main thing to have in mind when working with React (regardless of any other frameworks/libraries you add to your app) is what part of your app should change and how it will affect the rendered result. With that in mind GSAP provides a very complete set of callbacks that can help you update your component's state and then use that update in your state to do something and trigger a re-render. As Zach mentions I would stay away from GSAP updating your components/app state permanently because you'll end up with a bunch on unnecessary re-renders and quite a performance issue.

 

Happy Tweening!!!

[shikari]

@Rodrigio, @ZachSaucier thank you for your support.