Hi,
I would like to set dynamically x transform on scroll on element in my marquee, but the render is not immediate, there lot of latency.
That my different gsap definition. Do you have any solution ?
this.duration = 40;
this.timeLine = gsap.timeline({
repeat: -1,
force3D: true
});
// SCROLL EVENT
document.addEventListener('scroll', debounce(() => {
//console.log(this.currentX - n);
let t = window.scrollY;
let n = t - this.scrollPosition;
//console.log('SCROLL', this.currentX - n);
this.timeLine.fromTo(this.trainContentWrapper, {
x: this.currentX,
immediateRender: true
}, {
x: this.currentX - n,
immediateRender: true,
})
this.scrollPosition = t;
}, 250));
//Timeline definition
resize() {
this.totalDistance = this.trainContentWrapper.getBoundingClientRect().width / 2;
this.timeLine.to(this.trainContentWrapper, {
x: -this.totalDistance,
duration: this.duration,
ease: "none",
//overwrite: true,
onUpdate: () => {
this.currentX = gsap.getProperty('.train-content__wrapper', 'x');
}
});
}