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

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.

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

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,

}

)