Annihilator

thank you very much, it works!

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> </> ); }

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");" if I enter the variable "let sections = gsap.utils.toArray(".panel");" it gives me this problem rec2.mp4

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. https://codepen.io/Vik85/pen/YzvyYPL 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 rec.mp4

Hello everyone, I tried to search the forum but I didn't find any project regarding horizontal scroll done in NextJs, could someone kindly point me to it? Thank you very much and have a nice day

Thank you very much for the support, I saw that actually the speed is the same thanks to the console log I also used an ease suitable for my purpose, thanks again

hi, I tried to insert scrollTrigger, but at the moment of the scroll "second, thirdy and last section" they are faster than the "first section" at the scroll and I don't have time to see the next element well. Is there a way to make the scroll last longer? I tried to increase the overall height or use a longer duration but nothing. I also tried adding the smoothscroll but the result didn't change (it was smoother but always fast between the various elements). https://codepen.io/Vik85/pen/OJZGaMm

Thank you very much, actually as you suggested starting only with the animation and then the scroll trigger is a good way to not get stuck.

thanks for the reply, this is where i am stuck, i would like the text to come out like in the example above. https://codepen.io/Vik85/pen/OJZGzmd

Hi everyone! I wanted to know if it was possible to achieve this effect with ScrollTrigger, a full-screen zoom of an element to show other elements to the scroll. I am also attaching the website link for more details on the effect. https://www.metachors.com/ Thank you scroll.mp4