React pinned object disappear on start to end

[yoftahe 0 Likes (Newbie)]

yes I have seen the question asked before and it isn't the problem I'm have, I'm trying to animate object with scrollTrigger in react .  it dissappears when start point kicks in and reappears when pinning ends. 

 

here is my codesand box link:https://codesandbox.io/embed/weathered-rgb-h4j8b0?fontsize=14&hidenavigation=1&theme=dark

I appreciate any help.

[akapowl 5,135 Likes (Superhero)]

Hello there,

 

have you seen the React + GSAP guide ?

 

Your problem seems to be related to the double rendering that StrictMode does from React 18 on.

 

A solution to this should be to use gsap.context() including cleaning things up properly.

 

 

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

 

[inzn 1 Likes (Newbie)]

@akapowl I'm having the same issue. I believe it is related to the page scroll with Locomotive scroll messing up with translating the page. However, this should be possible and I found a tutorial by Greensock: 

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

 

 

I cannot get it to work though, my content keeps disappearing. Here is a minimal demo:

https://codesandbox.io/s/cool-noyce-108h6c?file=/pages/index.tsx

 

Here is also a link to the final page. At the bottom where it says “Meine Community Über Mich” you can see it disappear and reappear: https://juliaweber-git-preview-inzn.vercel.app

 

Thanks for your help!

[Rodrigo 5,073 Likes (Superhero)]

Hi,

 

The issue is that your quotes section has a display flex and you are actually pinning it. 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.  

 

What you should do is wrap your quotes container with another one and pin that wrapper and keep everything in the quotes container as it is and it should work.

 

Also for working in React apps and it's ecosystem we strongly recommend using GSAP Context:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Finally you should take a look at this article:

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[inzn 1 Likes (Newbie)]

Hey @Rodrigo, first of all thanks for the swift and helpful reply! It does work indeed and I updated the CodeSandbox. I do, however, now encounter the error that the quotes segment is not pinned, while the wrapper is. I tried setting the pin to ".quotes" with no effect.

[Rodrigo 5,073 Likes (Superhero)]

Hi,

 

You're still pinning the quotes container in your code:

gsap.to(".quotes-wrapper", {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ref.current, // ref is the element with class quotes
    start: "top center",
    end: () => "+=" + ref.current.offsetWidth,
    scrub: 0.5,
    markers: true,
    pin: true
  }
});

Pin true by default pins the trigger element which is the quotes. The trigger element has to be the parent element. Also there could be some other issues that are brought to the table by locomotive. Unfortunately we don't have the time resources to debug third party plugins/components. I created a simple example without locomotive and it seems to work fine:

 

https://stackblitz.com/edit/react-w4eihw?file=src%2Fstyle.css,src%2FApp.js

 

Hopefully this helps. Let us know if you have more questions.

 

Happy Tweening!

[inzn 1 Likes (Newbie)]

Unfortunately, this brings me back to square one with everything disappearing at start and reappearing at end (due to Locomotive Scroll’s page translation). Bummer, thought someone had a fix for this for sure. Thank you though!

[Rodrigo 5,073 Likes (Superhero)]

Hi,

 

Sorry to hear about the troubles, is no fun when something just doesn't work .

 

Maybe you could try using Locomotive directly on the project and not using the React wrapper. As you can see there are plenty of Vanilla JS examples around here that use ScrollTrigger and Locomotive without any issues. I know that using the hook and the high order component is super fast and makes your life far easier, but sometimes these things require some extra working hours.

 

Finally you should check ScrollSmoother, GSAP smooth scrolling plugin:

https://greensock.com/scrollsmoother/

 

It is a Club GreenSock bonus plugin, but normally the cost of that is recovered in a single project, after that is all profits and you get an excellent tool set that allows you to do amazing things.

 

Happy Tweening!

[Rodrigo 5,073 Likes (Superhero)]

Hi @inzn,

 

You could take a look at this thread and see if what that user did could help you in your app:

 

Happy Tweening!