Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
simonmnt

Problem update dynamically x on scroll

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

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.

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

You can't animate the same property of the same target with two different animations at the same time. It's logically impossible :) If you need to do that sort of thing, usually it's best to create an empty wrapper element around your target and apply one of the animations to that element.

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

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 :) 

Link to comment
Share on other sites

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

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

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

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.
×