Component disappears when ScrollTrigger is present

[emmme]

Hello everyone,

I'm new here! Already fallin in love with Gsap but:

Here is the codesandbox of the issue: https://codesandbox.io/s/elegant-https-f3j9sp?file=/src/components/Quote.jsx:260-484 , i suggest to "open in new window"

 

I just ran into this bug: when i comment off the ScrollTrigger's useLayoutEffect the animation in Quote.jsx works as intend, but when i put it back on the animation gets problematically buggy...

 

Thanks in advance!

 

EDIT: tried to reproduce same example without css and even slimmer code: https://codesandbox.io/s/test-gsap-chiest-aiuto-b6sjko?file=/src/components/Quote.jsx:270-456

error still present: if i scroll up the section Quote.jsx is present, otherwise not

 

Edit: i added as return of the uselayouteffect the kill function and now seems more stable albeit css animation still not working properly

[Rodrigo]

Hi @emmme and welcome to the GreenSock forums!

 

3 hours ago, emmme said:

Already fallin in love with Gsap

We definitely love to hear that!! 💚

 

The issue is that you are pinning an element with flex position. 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.

 

Just wrap your flex container around an element without a flex display and it seems to work as you expect:

https://codesandbox.io/s/test-gsap-chiest-aiuto-forked-ol31bw?file=/src/components/Quote.jsx

 

Also is highly recommended that you use GSAP Context when working with React:

https://greensock.com/docs/v3/GSAP/Context

 

Let us know if you have more questions.

 

Happy Tweening!

[emmme]

@Rodrigo thank you very much it was indeed a problem related to 

18 hours ago, Rodrigo said:

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.

For what i understood it was trying to move an immovable object, right?

 

Also, lets consider this with css again: https://codesandbox.io/s/elegant-https-f3j9sp?file=/src/components/Quote.jsx:270-494

why is the keyframe in /src/index.css rendering the animation laggy ? try to comment off useLayoutEffect in Quote.jsx

[Rodrigo]

Mhh... Honetsly I couldn't tell you about that. Any particular reason for not using GSAP for that animation?

 

I'd try GSAP in that animation an perhaps tie it to the ScrollTrigger instance.

 

Happy Tweening!

[GreenSock]

I'm not noticing lag, but I agree with Rodrigo that it'd be a good idea to do that animation with GSAP instead of CSS and see if that helps. 

 

And you should definitely either use gsap.context() like Rodrigo said or make sure you're doing proper cleanup because React 18+ does a double-call of useEffect()/useLayoutEffect() so you may be accidentally creating multiple ScrollTriggers. 

 

useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    ScrollTrigger.create({
      trigger: sectionRef.current,
      start: "top+=100 top",
      end: "bottom-=100 center",
      pin: true,
      markers: true
    });
  });
  return () => ctx.revert();
}, []);