Jump to content


React pinned object disappear on start to end

Go to solution Solved by akapowl,

Recommended Posts

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.

Link to comment
Share on other sites

  • Solution

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


  • Like 2
Link to comment
Share on other sites

@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:



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!

Link to comment
Share on other sites



The issue is that your quotes section has a display flex and you are actually pinning it. From the ScrollTrigger docs:



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:



Finally you should take a look at this article:

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


Happy Tweening!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites



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:




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


Happy Tweening!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites



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:



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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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.