[How to make a horizontal scroll using Next.JS]

14 hours ago, Rodrigo said:

Hi everyone!

 

@DennisDev, thanks for sharing your solution with the community 💚 There is one comment though about the code you posted: You're not using GSAP Context in your effect hook. We strongly recommend using GSAP Context in react environments to solve the issues that arise due to the double call in the effect hooks since version 18 of React.

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

 

As @DennisDev showed, this shouldn't be a complicated endeavor. I just created a super simple example of this that uses GSAP Context:

https://stackblitz.com/edit/nextjs-qq3fvh?file=pages%2Fscroll.js

 

Hopefully this helps.

Happy Tweening!

thank you on this but the stack blitz link you provide is broken could you update the link

[How to make a horizontal scroll using Next.JS]

import React, { useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import styled from "styled-components";

gsap.registerPlugin(ScrollTrigger);

const Container = styled.div`
  display: flex;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
`;

const Panel = styled.div`
  box-sizing: border-box;
  width: 498px;
  height: 459px;
  background: #fff;
  border-radius: 10px;
  flex: 0 0 auto;
  padding: 20px;
  margin-right: 10px;
`;

export default function IndexPage() {
  useEffect(() => {
    const sections = gsap.utils.toArray(".panel");

    gsap.to(sections, {
      xPercent: -100 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: ".container",
        pin: true,
        invalidateOnRefresh: true,
        anticipatePin: 1,
        scrub: 1.23,
        end: () => "+=" + (document.querySelector(".container") as HTMLElement).offsetWidth,
      },
    });
  }, []);

  return (
    <Container className="container">
      {Array.from({ length: 10 }).map((_, index) => (
        <Panel className="panel" key={index}>
          <h2>Card {index + 1}</h2>
        </Panel>
      ))}
    </Container>
  );
}

I hope this helps I used Next js typescript and style component