GSAP, x-y transformation in the Modern Player

As some other users in other posts commented when resizing/scaling your browser a Storyline using GSAP for animation will loose its proper positioning and that ain't fun. Allthough i had that fixed for quite a while i didnot have the time to post about it. Well here is a solution. In the attached Storyline there is a function called 'get_XYPos()'. That function returns an array with the x and y value of the object you are using. In the Storyline there is a GSAP timeline looping a shape to scale up and down. A small rectangle (1 x 1 ) is positioned in the Storyline and used as reference to the correct position. On resizing the browser window, a function is called killing the GSAP timeline tween and then getting the new x/y positions and setting the circle to that new correct position.
Then the looping GSAP timeline resumes and the animation continues...

2 Replies
Lee Mulvogue

It looks like there are some matrix-related functions in slide.min.js, but I've got no idea what they are doing or how to hijack them; there may be a hidden built-in way of doing this, especially as Storyline is already using GSAP behind the scenes?

Transform matrixes are an entirely new concept to me, and honestly I feel it's a major step backwards that such things have to be calculated, that it's not baked into HTML5 so everything just works "automagically"

Math Notermans

Completely agree on that with you. And as the Classic player doesnot have this issue...i might spend time to compare the slide.min.js of both players to figure out what functions do the sizing and positioning things...as you state... it indeed is built in somewhere. When checking the code you will notice lots of references to timeline, gsap and tweens. So it indeed is inthere somewhere probably.