simonmnt

I added a wrapper, and it's work fine. Thank you very much Zach. https://codepen.io/simonmnt/pen/jOVrPjj

Simply, as at the bottom of the site: https://www.investinpaupyrenees.com

Yes, no problem https://codepen.io/simonmnt/pen/jOVrPjj

Logic ? But if I create an empty wrapper, how to set the new value into current animation, I don't understand all... <div class="train-content" is="cci-train"> <div class="train-content__wrapper"> <span class="is-heading">Very long text</span> </div> </div>

Hey, thanks for your response, but when I add scrollTrigger I lose my horizontal auto transform ... gsap.to(this.trainContentWrapper, { x: -this.totalDistance, duration: this.duration, ease: "none", repeat: -1, scrollTrigger: { trigger: this.trainContentWrapper, markers: true, scrub: 0.5 } });

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