NextJS ScrollTrigger going to ending when starting

[PWSey]

Hi 
 

I was following the example below but when trying to implement on a nextjs project the animation on start is disappearing (going to the end of the animation) also it seems to be duplication i have no clue why, if anybody can enlighten me I would greatly appreciate it. When going from bottom to top animation works correctly.

Code sandbox link: https://codesandbox.io/p/sandbox/cool-gwen-gqvoqi
 

Example I followed:

See the Pen LYpaPQp by hexagoncircle (@hexagoncircle) on CodePen

[alig01]

Hey, 

 

your codesandbox is unfortunatly read only :/ 

Therefore I can't test it in your setup. But it looks like you are missing some css classes. 
Search in the internet for a scss to css compiler (I usually use this one) and copy the result into your project.

 

I would also encourage you to read Greensock's articles regarding React. There are many helpful tips, which help enormously. 

 

If the problem persists, try using gsap.context(), which is explained in detail in the linked article.  

const comp = useRef(); // create a ref for the root level element (for scoping)

useEffect(() => {
    let ctx = gsap.context(() => {
      //your animation
    }, comp); // <- IMPORTANT! Scopes selector text

    return () => ctx.revert(); // cleanup
}, []);

 

Edited December 9, 2022 by alig01
Added additional option

[Rodrigo]

Hi @PWSey and welcome to the GreenSock forums!

 

On top of @alig01 great advice about using GSAP Context 🙌 there is another thing in your setup. You are pinning an element with a display flex set to it. That can spell trouble if you're not carefull. Is better to use and pin a regular element to wrap your elements with display flex.

 

From the ScrollTrigger Docs:

 

pinSpacing

Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations. Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.

 

This vide by @Carl should explain that better:

 

I think if you use context and wrap your hero in a non-flex element your setup should work as expected.

 

Happy Tweening!

[PWSey]

Thanks a lot it seems you guys were correct, I added an additional non flex HTML element and using GSAP context solved the issue also added the missing styles.

Link: https://codesandbox.io/p/sandbox/cool-gwen-gqvoqi

 

Appreciate the quick and helpful responses!