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