Jump to content
Search Community

Problem update dynamically x on scroll

simonmnt test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

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

 

Link to comment
Share on other sites

I see quite a few problems:

  1. There's no such thing as setting force3D on a timeline. Maybe you meant to put it in the timeline "defaults"? 
  2. [this is the biggest problem:] You're constantly appending .fromTo() tweens to the timeline. So if the scroll event fires 3 times in 0.1 seconds, for example, you're setting up three 0.5 second sequenced tweens (1.5 seconds worth). I don't see any reason to use a timeline here. Just use a regular tween. Better yet, use ScrollTrigger with a numeric scrub value like Zach suggested. 
  3. There's no reason to use a .fromTo() - that's just eating more resources. The "from" part is like another set() call. Only use fromTo() if you literally need to make something jump to a new value at the very start. A simple to() is adequate here
  4. There's no point in setting immediateRender: true in the "from" vars. There's also no point in setting immediateRender: true in a to() tween. It's only useful if you're setting initial values that are different than the current ones. 
  5. Your onUpdate is just eating up resources needlessly - if all you're doing is setting currentX to match the "x" value of that element, why not just grab that directly when (and ONLY when) you need to use currentX? 

I really think you'd be better served by a simple ScrollTrigger-based animation with a numeric scrub. 

 

Good luck! 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...