Forum Discussion
JavaScript Placement issues
Had a look at your file and it's the units in your GSAP tweens. Your move values are in vw/vh, which are percentages of the browser window. SL doesn't position anything against the browser window. It draws the slide at its story size (720 x 540 in your project) and then scales the whole slide up or down to fit whatever window it's in. So your animations were measured against one thing (the window) while the objects live in another (the slide). On the monitor you built it on, the two happened to line up. On any other monitor or window size, they don't, which is exactly what you were seeing. To fix I used plain numbers instead of vw/vh. GSAP then moves the object in the slide's own pixels, and those scale together with everything else on the slide. Once it looks right on one screen, it should look right on every screen.
Before:
gsap.to(el, {x: "-10vw", y: "-30vh", scale: 0.23, duration: 2});
After:
gsap.to(el, {x: -271, y: -384, scale: 0.23, duration: 2});
The numbers are just the distance you want the object to travel in slide pixels (measured centre to centre, since GSAP scales objects around their centre). I've updated the three triggers in your file with values worked out from your layout. Preview it on both your monitors and everything should land in the same place. If the mid-shrink step feels slightly off, just nudge that one y value; it should then hold everywhere.
Related Content
- 1 year ago