Jump to content
Search Community

Overflow hidden and horizontal scroll

makilyes test
Moderator Tag

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

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

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