ScrollTrigger animate same element with 2 different timeline makes element lag

[Christopher Reeve]

Hello, first of all thankyou for this amazing library. 

i've just found gsap and try to learning it this past few weeks

 

right now i'm working on a scroll based animation website which animate so many element based only when the user scroll.

and now i've found a problem and confused how to fix it.

 

the problem is occured when i try to scroll the box between end of animation 1 end start of animation 2 so fast, the box will suddenly blinking to the end of animation 1 

what i want to achieve is the box should move to start of animation 2 end smoothly going to animation 1

this only happen when i try to animate same var (ex : animate Y in two differents animation)

is there any way to fix this? or did i do it wrong? please tell me 

See the Pen jOqZWwP by zynth17 (@zynth17) on CodePen

[ZachSaucier]

Hey Christopher and welcome to the GreenSock forums. 

 

Here's what's happening: 

1. Your animate_box_1.fromTo tween immediately sets the xPercent of the box to 0 and readies the animation to go to an xPercent of 500.
2. Your animate_box_2.from tween immediately sets the xPercent of the box to 500 (see the issue?) and plays an animation animating the scroll position to 0.
3. Your animate_box_2.to tween readies the animation to go to an xPercent of 700.

I'd just use two .fromTo tweens with immediateRender: false on the second one so that it doesn't immediate set the xPercent:

See the Pen yLOvXgG?editors=0010 by GreenSock (@GreenSock) on CodePen

[Christopher Reeve]

i don't think it does the work zach

it still does blinking when you scrolling fast

please try to scroll a bit over the start of animation 2 and scroll fast enough to end of animation 1 and it still blinking

[ZachSaucier]

I'm not seeing any blinking. What OS and browser are you in?

[Christopher Reeve]

14 hours ago, ZachSaucier said:

I'm not seeing any blinking. What OS and browser are you in?

i'm using windows 10 and google chrome 

[Christopher Reeve]

hello zac

you probably want to try this one

See the Pen eYZMvwv by zynth17 (@zynth17) on CodePen

[ZachSaucier]

I'm not seeing any blinking (I.e. element disappearing for a second) when testing on any browser or OS. I do see some jumping (I.e. a sudden change of position) if I scroll fast. But this is to be expected because your scrub of 0.5 means it will take half a second to get to the end value but the other tween overrides that animation. If you don't want that to happen you can either set scrub to true or use a timeline with one ScrollTrigger instead of two tweens with their own ScrollTriggers. Does that make sense?

[Christopher Reeve]

1 hour ago, ZachSaucier said:

I'm not seeing any blinking (I.e. element disappearing for a second) when testing on any browser or OS. I do see some jumping (I.e. a sudden change of position) if I scroll fast. But this is to be expected because your scrub of 0.5 means it will take half a second to get to the end value but the other tween overrides that animation. If you don't want that to happen you can either set scrub to true or use a timeline with one ScrollTrigger instead of two tweens with their own ScrollTriggers. Does that make sense?

thats what i meant! i just can't find the right word for it

Thankyou for the help zac!