makilyes Posted January 6, 2022 Share Posted January 6, 2022 Hello, I wanted to know if it was normal that when I do an overflow hidden for the body, the horizontal scroll with gsap doesn't work. When it arrives at this sections it disappears. Below the code that I did for the horizontal scroll. And attached the video of the horizontal section that disappears gsap.registerPlugin(ScrollTrigger); let sections = gsap.utils.toArray(".blogCaroussel--panel-container"); let scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".blogCaroussel--panel", pin: true, scrub: 0.1, end: "+=3000" } }) Link to comment Share on other sites More sharing options...
GreenSock Posted January 6, 2022 Share Posted January 6, 2022 No, that doesn't sound right to me - you must have something else going on in your project. It's impossible to tell, though, without a minimal demo. If you still need some help, please provide a minimal demo (like a CodePen) and we'd be happy to take a peek. 👍 Link to comment Share on other sites More sharing options...
makilyes Posted January 6, 2022 Author Share Posted January 6, 2022 Ok, now I know that I have to check from out it comes. I have a lot of components with nextJS, it will be hard to do a minimal (I'll try if I really can find out). It happens when I transition between pages with animations, When I get back to it, it hides. So my guess is that it's most likely from the "react transition group". Because if I put the overflow back, I have the horizontal scroll bar that appears, and it goes left-right alone (only the scrollbar not the page) when I get back to the page. I'll keep this post updated if I find (doubt it, I'm a beginner) or not. Thanks, always quick responses, great support Link to comment Share on other sites More sharing options...
GreenSock Posted January 6, 2022 Share Posted January 6, 2022 Here's a Next.js template in CodeSandbox that you could use as a starter for a minimal demo: https://codesandbox.io/s/gsap-next-js-starter-jekrn Make sure you .kill() your ScrollTriggers when you leave the page in a framework like that. If you want to kill ALL of them, you could do: ScrollTrigger.getAll().forEach(t => t.kill()); Otherwise, you may end up re-creating redundant ones over and over again when you leave/return to the page. This isn't an issue with GSAP/ScrollTrigger - it's related to the nature of a framework like Next.js. Link to comment Share on other sites More sharing options...
makilyes Posted January 7, 2022 Author Share Posted January 7, 2022 Hello, I managed to do a minimal demo with the starter you sent So onLoad if you scroll you will see that the horizontal scroll works fine. But then when you click on the link on the top "AboutPage", then click ''backhome'', you will see that when you scroll down and when the horizontal scroll gets triggered it disapears. What I noticed is when I remove the pin=true it appears,but of course I loose the effect ... https://codesandbox.io/s/cool-jang-tt547 Thanks for the suuport Ilyes Link to comment Share on other sites More sharing options...
OSUblake Posted January 7, 2022 Share Posted January 7, 2022 I don't think GSAP will be able to do pinning in the middle of page transition. You need to wait until the page transition and animations are done before creating your ScrollTrigger. Also, it's usually better use useLayoutEffect for ScrollTrigger. 1 Link to comment Share on other sites More sharing options...
makilyes Posted January 7, 2022 Author Share Posted January 7, 2022 @OSUblake Just wanted to ask you, so what would be the best approach to keep the transitions and the horizontal scroll. Thanks for your answers Link to comment Share on other sites More sharing options...
OSUblake Posted January 7, 2022 Share Posted January 7, 2022 I'm guessing you would need to pass a prop into your component when the transition is done and then create your ScrollTrigger. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now