Why gsap.fromTo lets object move opposite to the y axis direction?

[Leo D]

Hello guys,

I'm implement this animation for my heading 1. From y: -20 to y: 0. As I expect that it should move bottom up, but actually, it moves top down. Why gsap axis's value directions is so different. Can you guys instruct me, thanks!
 

gsap.fromTo(

"h1",

{

opacity: 0,

y: -20,

},

{

opacity: 1,

y: 0,

duration: 0.6,

ease: "power1.out",

delay: 1.5,

stagger: 0.2,

}

)

[mvaneijgen]

Hi @Leo D welcome to the forum!

 

The top most point of an element is x: 0, y: 0, so setting a -20 will means it moves up 20 pixels from the 0 it currently is. This is how the web is build, but I know what you mean and there are probably programs out there that do function like you are thinking, but GSAP follows the CSS and other web standaards. If you would set transform: translateY(-20px); in CSS it would also move up and that is what the y: property is based on. 

 

If you still have a question be sure to post a minimal demo, so we can take look at your code in action. 

 

Hope it helps and happy tweening! 

[Leo D]

27 minutes ago, mvaneijgen said:

Hi @Leo D welcome to the forum!

 

The top most point of an element is x: 0, y: 0, so setting a -20 will means it moves up 20 pixels from the 0 it currently is. This is how the web is build, but I know what you mean and there are probably programs out there that do function like you are thinking, but GSAP follows the CSS and other web standaards. If you would set transform: translateY(-20px); in CSS it would also move up and that is what the y: property is based on. 

 

If you still have a question be sure to post a minimal demo, so we can take look at your code in action. 

 

Hope it helps and happy tweening! 

Thank you so much! After hear your explaination, I research further and found some info about it from W3 ORG, now I understood it:
The coordinate space is a coordinate system with two axes: the X axis increases horizontally to the right; the Y axis increases vertically downwards.

[Rodrigo]

Yep, is a really head scratcher coming from a cartesian system formation understand why in web the Y axis works upside-down soto speak, but that is the spec and how it works based on the box model where the origin is at the top left corner and as you go down in a document you're actually using positive scroll values.

 

Great to hear that you got to those resources and thanks for sharing them with the community! 💚

 

Happy Tweening!