Forum Discussion
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...
- MerveSatmazCommunity Member
- LeeMulvogueCommunity Member
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"
- MathNotermans-9Community Member
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.
- BarryStoner-786Community Member
Thank you for this Math.
- MathNotermans-9Community Member
your welcome Barry
- Arystian-InglotCommunity Member
Thanks for that.
In the classic player, it doesn't work well either.
Hmm so if I understand correctly, for each animated object on the screen we need to add an additional object which controls the position of this animated object? It spoils the use of GSAP in the Storyline a little.
- MathNotermans-9Community Member
Hi Arystian,
Not really. You can control as many objects as wanted with 1 line of Javascript/GSAP code. Issue with the players is that they control scale of the Storyline in the browser, thus when using Javascript that doesnot relate directly to Articulate's code those can get out of sync. That mostly relates to positioning.
Several ways to solve that. Probably the most intuitive is not using pixels when positioning but using percentages or em. That way all your animated positions keep in sync with Articulates players.
- Arystian-InglotCommunity Member
Thank you, Math,
works much better with percentages.
- JamesBennett-23Community Member
Hi Math,
Currently figuring out GSAP and testing with a few demos.
I'm not sure I follow when you suggest using % values to solve the zoom issue?
For example, I'm using a scale animation on an object to fill the screen but then if I zoom in/out it resets to it's original size
Here's the example:
https://360.articulate.com/review/content/b87bcf58-6e7e-453f-ad93-bed2bf5ec5bb/review
Thanks in advance!
- MathNotermans-9Community Member
Indeed that is some peculiar behaviour. Probably you should add a event handler to watch a resize of the window... in not tested dummy code some like this...
window.addEventListener("resize", ResizeHandler, false);function ResizeHandler(e)
{
var e = window.event || e; // old IE support
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;
console.log("ResizeHandler: vw = "+viewportWidth+" | vh = "+viewportHeight);
gsap.set(myShape,{scale:percentagetoscalefromOriginalToviewportMax})return false;
} - rosycolelliCommunity Member
@James could you share your file? Thank you!
- JamesBennett-23Community Member
Thanks Math!
Using a mix of that code & what's in the "GSAP_getposition.story" you posted I think I've got it.I don't fully follow what the "function get_XYPos" is doing but it works well.
- MathNotermans-9Community Member
In GSAP there is now a helper function 'getProperty'.
It probably does the same as my 'get_XYPos' and for sure is better tested in all circumstances.
You might wanna replace it with that.var myElement = document.querySelector("[data-acc-text='someAccName']");
var elXPos = gsap.getProperty(myElement, "x");
var elYPos = gsap.getProperty(myElement, "y");
console.log("x: "+elXPos+" | y: "+elYPos);
- giovannidibe914Community Member
A curious thing happens with the new getProperty(...) suggested as alternative to getXYPos(). It doesn't give the same results. A slight difference but (and that's the worst) not constant. It makes the animation slowly drift away...does it occur to anyone else? Once again thanks Math, you're an absolute reference.
- MathNotermans-9Community Member
Have not noticed that before. In the latest Storyline version ? Is there maybe some other script actively moving the element pixel by pixel ? Do share a sample...easier to debug...
- JamesBennett-23Community Member
Thanks for the suggestion Math, I've had a go with using this but it reintroduces the problems around browser zoom and window resizing. As the X/Y positions don't translate inline with the storyline window.
- DolandRuizCommunity Member
Basic question incoming!
Hi Math, I've been trying to figure out how to move an element by a certain amount instead of placing it in the designated x position. I've tried using your getProperty code above and doing something like:
var XPos = gsap.getProperty(myElement, "x");
gsap.to(myElement, {duration:.2, x:"XPos+25"});but as you can tell, that didn't work. I'm trying to use a keypress to move x left / right.