HOW To Animate a Scrubbed timeLine out of scrub

[parsastar]

hey there hope you guys are having a good day ,

i have a scenario which i should animate a element in while it has a scroll trigger and scrub 

lets say the loading state ends and then the box should animate from its original position to some where lets say { y : 0 } -> { y : -100}.

the problem is i want this element to also have this animation with scroll trigger and scrub to true , i searched a lot for the possible ways but none of them worked smoothly until i found this and added a little code to control my animation with it but it might gets a little bit laggy if the user scrolls fast since the onUpdate on gsap tween which i wrote might doesn't run smoothly , does any one have any better solution to achieve my goal ?

 

See the Pen yyeExdZ by Parsa-Alizadeh-the-vuer (@Parsa-Alizadeh-the-vuer) on CodePen.

[Rodrigo]

Hi @parsastar and welcome to the GSAP Forums!

 

I'm not 100% sure I follow exactly what you're trying to achieve here but perhaps something like this:

See the Pen zxrameN by GreenSock (@GreenSock) on CodePen.

 

I think you're overcomplicating things a bit, IMHO, so that approach seems more straightforward and simple.

 

Hopefully this helps

Happy Tweening!

[parsastar]

50 minutes ago, Rodrigo said:

Hi @parsastar and welcome to the GSAP Forums!

 

I'm not 100% sure I follow exactly what you're trying to achieve here but perhaps something like this:

 

 

 

I think you're overcomplicating things a bit, IMHO, so that approach seems more straightforward and simple.

 

Hopefully this helps

Happy Tweening!

hey Rodrigo thanks for the quick response i really appreciate that.

i believe what you are doing in the the provided code pen is to disable user from scrolling the body(with overflow :hidden on the body) and then fix it after the animation is complete which is not quite what i am trying to do.

the whole problem is base on this  and it occurs if the user is able to scroll before the completion of animation because scroll trigger will start from {progress :  .5 },

to be clear : 

as user scrolls before the completion of animation the progress could be any where around 1 to .5 but because the scroll trigger always starts from the .5 you may see a jump which is not very ideal for this scenario i drop a code pen link here so you can see that easily.

now in my opinion one solution is which i have done and yes it is indeed a little heavy and complex . now i have another solution in my head which is setting the first value of progress in scrollTrigger in the from part  to none ( don't set it at all ) and then on its first completion set it to .5 ( if this works and we are able to do so )

in the code pen i added my idea by comments thanks you for your time 

See the Pen yyeEQbV by Parsa-Alizadeh-the-vuer (@Parsa-Alizadeh-the-vuer) on CodePen.