Help with the horizontal snap scroll with Reactjs

[Duckgottago]

Oh hi I'm new to gsap and I've been working on that for a few days tho but it still doesn't work as expected. 

I want it to be like this  but mine is only able to scroll but will leave the user wherever they were. So sorry if it's not enough cuz this is my first time ever using codepen but the whole related codes are just that much 

See the Pen zYyqgyv by mhiuuu (@mhiuuu) on CodePen

. Thank you so much for helping me!!!!

The code if the link is not working (It is pure reactjs, tailwindcss code):

 

import { useLayoutEffect } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

const Intro = () => {
  useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      gsap.registerPlugin(ScrollTrigger);
      let sections = gsap.utils.toArray(".panel");

      gsap.to(sections, {
        xPercent: -100 * (sections.length - 1),
        ease: "none",
        scrollTrigger: {
          trigger: ".intro_slide",
          pin: true,
          scrub: 0.5,
          snap: {
            snapTo: 1 / (sections.length - 1),
            duration: 0.05,
          },
          // base vertical scrolling on how wide the container is so it feels more natural.
          end: "+=3500",
        }
      });
    });
    return () => ctx.revert();
  }, []);

  return (
  <div className="flex flex-nowrwap overflow-x-auto intro_slide">
    <section> 
      <div className="h-[102vh] flex flex-col md:flex-row-reverse bg-[url(https://source.unsplash.com/random/1)] bg-no-repeat bg-cover w-[110vw] panel">
        <div className="basis-full bg-gradient-to-b md:bg-gradient-to-r from-black opacity-90 flex flex-col md:flex-row h-[102vh]">
          <div className="basis-1/3 text-white text-xl my-auto">
            <h1>Hiiii</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi porro repudiandae praesentium doloribus aliquam, in quibusdam reiciendis excepturi harum officiis nostrum obcaecati. Quibusdam, velit placeat maiores in quidem quo. Beatae?</p>
          </div>
        </div>
      </div>
    </section>
    <section> 
      <div className="h-[102vh] flex flex-col md:flex-row-reverse bg-[url(https://source.unsplash.com/random/2)] bg-no-repeat bg-cover w-[110vw] panel">
        <div className="basis-full bg-gradient-to-b md:bg-gradient-to-r from-black opacity-90 flex flex-col md:flex-row h-[102vh]">
          <div className="basis-1/3 text-white text-xl my-auto">
            <h1>Hiiii</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi porro repudiandae praesentium doloribus aliquam, in quibusdam reiciendis excepturi harum officiis nostrum obcaecati. Quibusdam, velit placeat maiores in quidem quo. Beatae?</p>
          </div>
        </div>
      </div>
    </section>
    <section> 
      <div className="h-[102vh] flex flex-col md:flex-row-reverse bg-[url(https://source.unsplash.com/random/3)] bg-no-repeat bg-cover w-[110vw] panel">
        <div className="basis-full bg-gradient-to-b md:bg-gradient-to-r from-black opacity-90 flex flex-col md:flex-row h-[102vh]">
          <div className="basis-1/3 text-white text-xl my-auto">
            <h1>Hiiii</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi porro repudiandae praesentium doloribus aliquam, in quibusdam reiciendis excepturi harum officiis nostrum obcaecati. Quibusdam, velit placeat maiores in quidem quo. Beatae?</p>
          </div>
        </div>
      </div>
    </section>
  </div>
  );
};

export default Intro;

See the Pen eYMQZax?editors=0010 by GreenSock (@GreenSock) on CodePen

[mvaneijgen]

Hi @Duckgottago welcome to the forum!

 

Indeed the code in your pen is not working, I've tried to debug it, but I also can't get it to work. I know it is possible to load React in a code pen, but maybe it is easier to use our Stackblitz starter template for React, this is a full development environment.

 

I know CSS is really important when creating effects like this and Tailwind has a tendency to add more than what is need and can cause trouble that way. 

 

If you can get your demo to work in Stackblitz we'll be happy to take a look!

[Duckgottago]

Hi, since you told me about this, I've spent time trying to use stackblitzs, replit, codepen but none of them worked like my local, really started to think this is my fault cuz the local looks great but I'm pretty much just a noob to web development. So I think the best choice to to give you the whole code of my project and since the deadline (not really because this is the project for my high school charity event) is this Sunday and the size is quite big maybe I should just leave it like it is right now to go into other section as well. However, this is the code for you to check out https://stackblitz.com/edit/stackblitz-starters-oh3db1?file=README.md or this is the git repo of it https://github.com/mhiuuu/tron_khuyet

[mvaneijgen]

Ha, sorry I'm a total noob when it comes to React, so I can't really debug your code. I know my way around GSAP, so when a project is working on Stackblitz I can modify the functions to help you move in the right direction. 

 

Another route you can go is just create static HTML and CSS in a Codepen an try to get the GSAP code working in there. I personally find it much more liberating testing out new ideas without all the frameworks getting in the way. Personally I use codepen, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. And doing this without all the frameworks really helps getting a clearer picture what is needed for the animation. 

[alig01]

Hey,

 

your pen is missing your whole css styling, based on the code I assumed you where using tailwind, but I never used it before. I changed w-[110vw] and h-[102vh] to min-w-screen min-h-screen so that it comes close to your desired style.  

 

Keep in mind that the animation of your provided codepen works because each section is the same size. If the size changes, you have to take this into account, but for this case there are also a lot of codepen examples out there (Showcases, How-Tos).

 

I hope this leads you in the right direction and good luck with your project.

 

Edit: 

Sorry there is no such thing as min-w-screen. As soon as the styling works, it is much easier to help someone.

I have updated the pen. But you should definitely check and improve the styling.

See the Pen jOXrbQa?editors=0110 by alig01 (@alig01) on CodePen

Edited September 6, 2023 by alig01
Removed first codepen

[Duckgottago]

3 hours ago, mvaneijgen said:

Ha, sorry I'm a total noob when it comes to React, so I can't really debug your code. I know my way around GSAP, so when a project is working on Stackblitz I can modify the functions to help you move in the right direction. 

 

Another route you can go is just create static HTML and CSS in a Codepen an try to get the GSAP code working in there. I personally find it much more liberating testing out new ideas without all the frameworks getting in the way. Personally I use codepen, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. And doing this without all the frameworks really helps getting a clearer picture what is needed for the animation. 

Oh no thank you very much for helping me out, That really helps a lot, maybe I should learn how to use some sort of online IDE like codepen and stackblitzs too. Btw tailwind sometimes does conflict with other frameworks or community-built libraries too

[Duckgottago]

49 minutes ago, alig01 said:

Hey,

 

your pen is missing your whole css styling, based on the code I assumed you where using tailwind, but I never used it before. I changed w-[110vw] and h-[102vh] to min-w-screen min-h-screen so that it comes close to your desired style.  

 

 

 

 

Keep in mind that the animation of your provided codepen works because each section is the same size. If the size changes, you have to take this into account, but for this case there are also a lot of codepen examples out there (Showcases, How-Tos).

 

I hope this leads you in the right direction and good luck with your project.

 

Edit: 

Sorry there is no such thing as min-w-screen. As soon as the styling works, it is much easier to help someone.

I have updated the pen. But you should definitely check and improve the styling.

 

Oh thank you so much, definitely will check it out, the reasons for h-[101vh] and w-[102vw] is for some strange thing, tailwind does make the sections cover the whole screen and leave a annoying small blanke space in the end so I just make it a little bigger to fill it. Thank you so much!!! Have a really good day.