Timeline properties goes back to first timeline

[mcsouh]

Hello !

 

I don't understand the behavior of this three step animation: 

Firstly I set the red box 100px lower and invisible (instantly, like a .set method, but I didn't manage to make it with the .set)
=> this is okay, the box is 100px lower, and not visible
Secondly I make the box appear, and going up 100px
=> this is also okay, the box goes up and appear
But then when I scroll (and launching the third animation, based on scrollTrigger) the marginTop property go back to the first animation value (100px lower)

Is it something I wrote wrong ? Or maybe the scrollTrigger mixed with normal gsap animation ? I've tried to test it in so many ways but I can't get it to continue the animation from the second animation value

I don't know if it was clear, if something is not please tell me,

Thank you for reading

See the Pen XWoLeeY by mcsouh (@mcsouh) on CodePen

[Carl]

thanks for the demo.

 

The big problem is that you are putting a ScrollTrigger on a tween in a timeline. This creates a conflict where both the timeline and ScrollTrigger are fighting for control of the tween. 

 

Please read: https://gsap.com/resources/st-mistakes/

 

Another issue is that your ScrollTrigger's star postion is "top top" which means it is active the instant the page loads.

I set it to use start:"top -1" which forces the user to scroll.

 

The demo below should basically work if the user does NOT scroll while the first animation is playing:

 

See the Pen QWzXQWE?editors=0010 by snorkltv (@snorkltv) on CodePen

 

There's unfortunately a few logic problems to work out if you want to animate an item with a timeline and also allow the user to control a tween using relative values on that item via a ScrollTrigger.  The big issue is that if the box has a margin-top of 50 while animating at first and then the user starts scrolling, then the ScrollTrigger animation will have a starting value of 50 and end value of 150.

 

You could try to prevent scrolling by setting overflow:hidden on the body during the first animation but then the page will most likely shift when the scrollbar gets added. I'd normally recommend against preventing scrolling. 

 

Also, I would stick to animating transform values like "x" instead of "marginTop". 

 

 

[mcsouh]

Hello Carl,

Thank you for your answer, I understand better now ! I'll try to play with the different option to maybe pause the animation while scrolling or find anything else !

And for the marginTop, I'm using it because on the real project, I already have some transform properties, and they were conflicting with the gsap x, y, z and rotate, I assumed it was normal behavior, but if you have a tips for that I could appreciate it !

Thanks again for your answer,
Have you a good day !