Jump to content
Search Community

NextJs Horizontal Scroll

Annihilator test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

 

 

I created a demo in React of what I would like to do (and it seems to be working), but when I use the same code in Nextjs the result is just a blank screen.

 

See the Pen YzvyYPL by Vik85 (@Vik85) on CodePen

 

I used codesandbox to simulate nextjs, from here it works, but same code locally gives me problems.
all the panels inside the container are white and the scroll is vertical.

 

https://codesandbox.io/s/nextjs-hori-1lrkfc

 

 

local demo

 

Link to comment
Share on other sites

Hi,

 

Yeah, I created a new project using Next 13 and that actually happens, in the development server nothing. If I create a production build and run that in a local server it works as expected. My suspects are using NPX to scaffold the project and probably the way Next 13 is using React Strict Mode or something else.

 

Good news is that GSAP Context is here to save the day 🥳, just use this and it should work:

export default function Home() {
  const app = useRef();

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      gsap.to(sections, {
        xPercent: -100 * (sections.length - 1),
        ease: "none",
        scrollTrigger: {
          trigger: ".container",
          pin: true,
          markers: true,
          scrub: 1,
          end: () => "+=" + document.querySelector(".container").offsetWidth
        }
      });
    }, app);
    return () => ctx.revert();
  }, []);

  return (
    <>
      <div className="container" ref={app}>
        <div className="panel one">ONE</div>
        <div className="panel two">TWO</div>
        <div className="panel three">THREE</div>
      </div>
      <div className="last-panel one">LAST</div>
    </>
  );
}

I'll look into creating the same app with Yarn and see what happens, so please keep an eye in the thread 👀.

 

Finally is worth noticing that when using React we strongly recommend using GSAP Context in your projects:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

2 hours ago, Rodrigo said:

Hi,

 

Yeah, I created a new project using Next 13 and that actually happens, in the development server nothing. If I create a production build and run that in a local server it works as expected. My suspects are using NPX to scaffold the project and probably the way Next 13 is using React Strict Mode or something else.

 

Good news is that GSAP Context is here to save the day 🥳, just use this and it should work:

export default function Home() {
  const app = useRef();

  useLayoutEffect(() => {
    const ctx = gsap.context(() => {
      gsap.to(sections, {
        xPercent: -100 * (sections.length - 1),
        ease: "none",
        scrollTrigger: {
          trigger: ".container",
          pin: true,
          markers: true,
          scrub: 1,
          end: () => "+=" + document.querySelector(".container").offsetWidth
        }
      });
    }, app);
    return () => ctx.revert();
  }, []);

  return (
    <>
      <div className="container" ref={app}>
        <div className="panel one">ONE</div>
        <div className="panel two">TWO</div>
        <div className="panel three">THREE</div>
      </div>
      <div className="last-panel one">LAST</div>
    </>
  );
}
 

I'll look into creating the same app with Yarn and see what happens, so please keep an eye in the thread 👀.

 

Finally is worth noticing that when using React we strongly recommend using GSAP Context in your projects:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Happy Tweening!

hello and thank you very much for doing all these tests, however I have a problem using the code provided, I get this error back.

can't find the "sections", previously they were used with "let sections = gsap.utils.toArray(".panel");"

 

 

screen.png

 if I enter the variable "let sections = gsap.utils.toArray(".panel");" it gives me this problem

 

 

 

Link to comment
Share on other sites

Hi,

 

Ahh darn it, I forgot to add the selector:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    gsap.to(".panel", {
      xPercent: -100 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: ".container",
        pin: true,
        markers: true,
        scrub: 1,
        end: () => "+=" + document.querySelector(".container").offsetWidth
      }
    });
  }, app);
  return () => ctx.revert();
}, []);

That should do it.

 

Happy Tweening!

Link to comment
Share on other sites

26 minutes ago, Rodrigo said:

Hi,

 

Ahh darn it, I forgot to add the selector:

useLayoutEffect(() => {
  const ctx = gsap.context(() => {
    gsap.to(".panel", {
      xPercent: -100 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: ".container",
        pin: true,
        markers: true,
        scrub: 1,
        end: () => "+=" + document.querySelector(".container").offsetWidth
      }
    });
  }, app);
  return () => ctx.revert();
}, []);
 

That should do it.

 

Happy Tweening!

 

screen.thumb.png.3c2aacefd81f6ac4f722db3f3cfd2f94.png

 

unfortunately another error,  If I use this code I have the problem found in the video I posted in the previous comment

 

export default function Home() {
const app = useRef();
 
useLayoutEffect(() => {
const ctx = gsap.context(() => {
gsap.to(".panel", {
xPercent: -100 * ("panel".length - 1),
ease: "none",
scrollTrigger: {
trigger: ".container",
pin: true,
markers: true,
scrub: 1,
end: () => "+=" + document.querySelector(".container").offsetWidth
}
});
}, app);
return () => ctx.revert();
}, []);
return (
<>
<div className="container" ref={app}>
<div className="panel one">ONE</div>
<div className="panel two">TWO</div>
<div className="panel three">THREE</div>
</div>
<div className="last-panel one">LAST</div>
</>
);
}
 
Link to comment
Share on other sites

  • Solution

Mhhh... Bad React day for me it seems... I must be just thinking about candy! 🍬

 

Yep, I forgot about the trigger element in the code, that should be the ref created for the container:

export default function Home() {
  const app = useRef();

  useLayoutEffect(() => {
    const ctx = gsap.context((self) => {
      const sections = self.selector(".panel");
      gsap.to(sections, {
        xPercent: -100 * (sections.length - 1),
        ease: "none",
        scrollTrigger: {
          trigger: app.current,
          pin: true,
          markers: true,
          scrub: 1,
          end: () => "+=" + app.current.offsetWidth
        }
      });
    }, app);
    return () => ctx.revert();
  }, []);

  return (
    <>
      <div className="container" ref={app}>
        <div className="panel one">ONE</div>
        <div className="panel two">TWO</div>
        <div className="panel three">THREE</div>
      </div>
      <div className="last-panel one">LAST</div>
    </>
  );
}

I created a Next app in my local machine and tested it, that should be working as expected.

 

Lets know how it goes.

 

Happy HalloTween! :D 

  • Thanks 1
Link to comment
Share on other sites

10 hours ago, Rodrigo said:

Mhhh... Bad React day for me it seems... I must be just thinking about candy! 🍬

 

Yep, I forgot about the trigger element in the code, that should be the ref created for the container:

export default function Home() {
  const app = useRef();

  useLayoutEffect(() => {
    const ctx = gsap.context((self) => {
      const sections = self.selector(".panel");
      gsap.to(sections, {
        xPercent: -100 * (sections.length - 1),
        ease: "none",
        scrollTrigger: {
          trigger: app.current,
          pin: true,
          markers: true,
          scrub: 1,
          end: () => "+=" + app.current.offsetWidth
        }
      });
    }, app);
    return () => ctx.revert();
  }, []);

  return (
    <>
      <div className="container" ref={app}>
        <div className="panel one">ONE</div>
        <div className="panel two">TWO</div>
        <div className="panel three">THREE</div>
      </div>
      <div className="last-panel one">LAST</div>
    </>
  );
}
 

I created a Next app in my local machine and tested it, that should be working as expected.

 

Lets know how it goes.

 

Happy HalloTween! :D 

thank you very much, it works!

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