Jump to content
GreenSock

makilyes

Overflow hidden and horizontal scroll

Recommended Posts

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

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

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

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

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

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.

 

 

  • Like 1
Link to comment
Share on other sites

@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

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

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.
×