simonmnt Posted February 8, 2021 Share Posted February 8, 2021 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 More sharing options...
ZachSaucier Posted February 8, 2021 Share Posted February 8, 2021 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 More sharing options...
GreenSock Posted February 8, 2021 Share Posted February 8, 2021 I see quite a few problems: There's no such thing as setting force3D on a timeline. Maybe you meant to put it in the timeline "defaults"? [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. 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 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. 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! 2 Link to comment Share on other sites More sharing options...
simonmnt Posted February 9, 2021 Author Share Posted February 9, 2021 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 More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 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 More sharing options...
simonmnt Posted February 9, 2021 Author Share Posted February 9, 2021 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 More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 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 More sharing options...
simonmnt Posted February 9, 2021 Author Share Posted February 9, 2021 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 More sharing options...
ZachSaucier Posted February 9, 2021 Share Posted February 9, 2021 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 More sharing options...
simonmnt Posted February 9, 2021 Author Share Posted February 9, 2021 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 More sharing options...
Solution ZachSaucier Posted February 9, 2021 Solution Share Posted February 9, 2021 Something along the lines of this will work: See the Pen ExNgjYr?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
simonmnt Posted February 10, 2021 Author Share Posted February 10, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now