Last

Thank you, thanks to the links I managed to solve my problem. I just have one last question now, which of the two approaches is more performant using 2 useGSAP or just 1 useGSAP. I'm currently only using useGSAP but I would like to know if I can start using several useGSAP in my application without problems Thank you for your help🤝 // useGSAP( // () => { // const speed = 2.5; // const loop = horizontalLoop('.nft-card-left', { // repeat: -1, // speed: 1.5, // paddingRight: 16, // }); // let tl; // Observer.create({ // target: window, // type: 'wheel', // onChangeY: (self) => { // tl && tl.kill(); // const factor = self.deltaY > 0 ? 1 : -1; // tl = gsap // .timeline() // .to(loop, { timeScale: speed * factor, duration: 0.25 }) // .to(loop, { timeScale: 1 * factor, duration: 1 }); // }, // }); // }, // { // scope: container, // }, // ); // useGSAP( // () => { // const speed = 2.5; // const loop = horizontalLoop('.nft-card', { // reversed: 1, // repeat: -1, // speed: 1.5, // paddingRight: 16, // }); // let tl; // Observer.create({ // target: window, // type: 'wheel', // onChangeY: (self) => { // tl && tl.kill(); // const factor = self.deltaY > 0 ? -1 : 1; // tl = gsap // .timeline() // .to(loop, { timeScale: speed * factor, duration: 0.25 }) // .to(loop, { timeScale: 1 * factor, duration: 1 }); // }, // }); // }, // { // scope: container, // }, // ); useGSAP( () => { const speed = 2.5; const loopLeft = horizontalLoop('.nft-card-left', { repeat: -1, speed: 1.5, paddingRight: 16, }); const loopRight = horizontalLoop('.nft-card', { reversed: 1, repeat: -1, speed: 1.5, paddingRight: 16, }); let tlLeft, tlRight; Observer.create({ target: window, type: 'wheel', onChangeY: (self) => { tlLeft && tlLeft.kill(); tlRight && tlRight.kill(); const factor = self.deltaY > 0 ? -1 : 1; const factorLeft = self.deltaY > 0 ? 1 : -1; tlLeft = gsap .timeline() .to(loopLeft, { timeScale: speed * factorLeft, duration: 0.25 }) .to(loopLeft, { timeScale: 1 * factorLeft, duration: 1 }); tlRight = gsap .timeline() .to(loopRight, { timeScale: speed * factor, duration: 0.25 }) .to(loopRight, { timeScale: 1 * factor, duration: 1 }); }, }); }, { scope: container, }, );

Can anyone help me transform this carousel into infinity? Every time it reaches the end it returns to the beginning, leaving it infinity? I believe you should use wrap but I couldn't understand how to do that. 'use client'; import { useLayoutEffect, useRef } from 'react'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/all'; const Carousel = () => { const slider = useRef(null); const firstSlider = useRef(null); const secondSlider = useRef(null); let xPercent = 0; let direction = -1; useLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger); gsap.to(slider.current, { scrollTrigger: { trigger: document.documentElement, scrub: 0.25, start: 0, end: window.innerHeight, onUpdate: (e) => (direction = e.direction * -1), }, // x: '-500px', }); requestAnimationFrame(animate); }, []); const animate = () => { if (xPercent < -100) { xPercent = 0; } else if (xPercent > 0) { xPercent = -100; } gsap.set(firstSlider.current, { xPercent: xPercent * -1 }); gsap.set(secondSlider.current, { xPercent: xPercent }); requestAnimationFrame(animate); xPercent += 0.01 * direction; }; return ( <div ref={slider} className='flex flex-col items-center justify-center w-full h-full gap-y-10' > <div className='flex gap-x-10' ref={firstSlider} > {Array(20) .fill(null) .map((item, index) => ( <div key={index} className='bg-blue-500 w-36 h-36' > {index} </div> ))} </div> <div className='flex gap-x-10' ref={secondSlider} > {Array(20) .fill(null) .map((item, index) => ( <div key={index} className='bg-purple-500 w-36 h-36' > {index} </div> ))} </div> </div> ); }; export default Carousel;