Jump to content
Search Community

React pinned object disappear on start to end

yoftahe test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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!

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

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!

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

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!

Link to comment
Share on other sites

  • 11 months later...
On 1/6/2023 at 4:29 AM, Rodrigo said:

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!

I  forked from the example that you gave, then bring my work into, please help me check the problem, the pinned element also disapeared.

Link to comment
Share on other sites

Hi @nguyenhoangvubt,

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

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

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

4 hours ago, GSAP Helper said:

Hi @nguyenhoangvubt,

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Hi, so thanks for early reply.
I forgot to share the link. here is the link: https://stackblitz.com/edit/react-2nh63l?file=src%2FApp.js
When I use your template above, it work perfectly, the quotes were pinned as expected. But when I apply with locomotive scroll, it not working :((.

Link to comment
Share on other sites

You weren't defining the "scroller" properly. And you could simplify a lot by just using the useGSAP() hook. Plus I think you had the wrong API for LocomotiveScroll: 

https://stackblitz.com/edit/react-6bgnhq?file=src%2FApp.js

 

Please keep in mind that LocomotiveScroll is not a GreenSock product, so we can't really support it here. 

 

I hope this gets you going in the right direction. 

Link to comment
Share on other sites

8 hours ago, GreenSock said:

You weren't defining the "scroller" properly. And you could simplify a lot by just using the useGSAP() hook. Plus I think you had the wrong API for LocomotiveScroll: 

https://stackblitz.com/edit/react-6bgnhq?file=src%2FApp.js

 

Please keep in mind that LocomotiveScroll is not a GreenSock product, so we can't really support it here. 

 

I hope this gets you going in the right direction. 

Hi, thank you for spending time with me, I checked the fix that you make for me and it work perfectly. Once again, thank for your support.

  • Like 2
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.
×
×
  • Create New...