[Problem update dynamically x on scroll]

13 hours ago, ZachSaucier said:

Something along the lines of this will work:

 

 

I added a wrapper, and it's work fine. Thank you very much Zach.

 

See the Pen jOVrPjj by simonmnt (@simonmnt) on CodePen

[Problem update dynamically x on scroll]

1 hour ago, ZachSaucier said:

Thanks, that's helpful. What's your end goal? To speed up the animation that you have when the user is scrolling? If so, how? Based on the velocity? Or the scroll position? Are you wanting the direction to reverse? 

 

If you have a reference video or diagram that might be helpful if you don't know how to describe what you're wanting with words.

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

[Problem update dynamically x on scroll]

53 minutes ago, ZachSaucier said:

If you create a minimal demo of the situation with all irrelevant code stripped out using something like CodePen and ask a clear question we'll do our best to help  

 

Yes, no problem

 

See the Pen jOVrPjj by simonmnt (@simonmnt) on CodePen

[Problem update dynamically x on scroll]

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>

 

[Problem update dynamically x on scroll]

22 hours ago, ZachSaucier said:

Hey simonmnt and welcome to the GreenSock forums.

 

Is there any reason why you're not using ScrollTrigger for this sort of thing? It seems like what you're trying to accomplish is easily done using a ScrollTrigger numerical scrub value.

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

 

[Problem update dynamically x on scroll]

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