[Timeline properties goes back to first timeline]

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 !

[Timeline properties goes back to first timeline]

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