How Do I Consistently Set X and Y Using Easing?

[JayCoop]

New guy question here.  I'm trying to use some easing code inside Articulate Storyline 360.  Here's the code in question:  

 

gsap.to(btn1, { duration: 2.5, ease: "bounce.out", y: "173%" });

 

I'm trying to ease in 'btn1' and have it end at the same location relative to other objects on the page regardless of the screen size.  I started with setting just the pixels, then pixels with vh, and then percentage.  Percentage seems to work the most consistently, but I don't understand how the percentage is being calculated.  The animated object, btn1, is coming from just off of the top of the page and its final resting place is approximately 2/3 of the way down from the top, and I don't understand why 173% seems to be the magic number.  The stage is 720 x 540, the object if 150 x 150, and the final spot I'm trying to hit is X:23 Y: 265,if this helps at all.  

 

I've done a little coding but I'm nowhere near proficient, so if someone could help me understand what's happening, I'd appreciate it.

 

v/r

Jay

See the Pen by (@) on CodePen

[Rodrigo]

Hi,

 

That sounds like a job for the Flip Plugin:

https://greensock.com/docs/v3/Plugins/Flip

 

Here is a simple demo:

See the Pen dypYrqm by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!