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.
How Do I Consistently Set X and Y Using Easing?
in GSAP
Posted
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