Changing y-value in ScrollTrigger not possible, x-value is possible..

[_josch]

Hello!

Does someone know why it's not possible entering a y-value other than 0 in this code (picture 1)? It's a rather simple animation, the title should move up on the y-axis as the user scrolls. However, when entering a value for y, this error comes up (picture 2), x-values work however...

 

What's weird is that a rather similar animation just below that works perfectly fine with y-values (picture 3). Does anyone know how to fix the issue of not being able to work with y-values in the first animation?

[OSUblake]

You should not animate a pin.

 

Quote

Warning don't animate the pinned element itself because that will throw off the measurements (ScrollTrigger is highly optimized for performance and pre-calculates as much as possible). Instead, you could nest things such that you're animating only elements INSIDE the pinned element.

 

[_josch]

Thanks for the answer @OSUblake!

Instead of animating the pin I split up the animation in 2 different timelines, and because I'm new to JavaScript and GSAP I'm wondering if that's an optimal way to do it? It definitely results in the diresired animation. This is the screen capture because of the file size limit I can't upload it here as a png: https://gyazo.com/f21f698b7ba3b7fab84a07e922b36467

 

Thank you for your help!

[OSUblake]

Yep, there's nothing wrong with creating additional timelines with the same trigger. 😉