Duckgottago

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

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

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 https://codepen.io/GreenSock/pen/eYMQZax?editors=0010 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 https://codepen.io/mhiuuu/pen/zYyqgyv. 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;