GSAP, x-y transformation in the Modern Player

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.

Thank you for this Math. 

your welcome Barry

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.

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.

Thank you, Math,

works much better with percentages.

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!

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;
}

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.

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);

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.

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. 

woohoo! nevermind, I got it using the site you gave me in another thread:

https://greensock.com/get-started/#transformShorthand

For anyone who has a similar question, it's:

gsap.to(movepic, {duration:.2, x:"+=25"});

^ so the += right before the number of pixels is the answer.

well, it aint gonna work for me because I am making a catch game and the gsap makes it think that the Basket is in the original position and so it does not Interact with the falling objects even if you used the keys to place the basket under the falling object. 

So I went the built-in route and used Motion Paths with Relative Start points and it works great.

If you use JS to move things... internally Storyline is not aware of that. So when creating any game you need to choose... use purely Storyline default options... or use external Javascript...then you need to make Storyline aware of changes by using variables.

Hi Math,

I am hoping you can see why this Greensock MotionPath isn't working. I don't know if it is the variable is incorrect or something else. I appreciate your expertise.

Sample of my variables

var  tBox = document.querySelector("[data-acc-text='topBox'] > div > svg > g > path");
var  lined = document.querySelector("[data-acc-text='path'] > div > svg > g > path");

As im out of the office atm its not that easy to check/test. Giving it an attempt however... do check your console for clues when debugging...

As i mentioned in a separate post... watch for changes Articulate makes in updates... as they can cause things not working. Alas this makes it even more important to stick to a specific version of Storyline when cooperating with others in heavier Javascript projects.

Please enjoy your time off, I will try some different approaches and see what I can do. I am curious when your back in office how you use your console (in browser, codepen or other app), because when I view this in the browser console, I am not seeing the information that will help me, it's probably me not viewing or using it right. Thank you for your quick response.

Checking the console its quite clear whats wrong ;-)

You use 2 plugins... MotionPath plugin and MotionPathHelper plugin.
Both you need to register before you can use them.
gsap.registerPlugin(MotionPathPlugin);
gsap.registerPlugin(MotionPathHelper);

Then you can use them :-)

Great - I will register both of them! Thank you!

Showcase of MotionPath and MotionPathHelper plugin are here.
https://360.articulate.com/review/content/4db5ea21-c36a-4a22-9278-553838ee35f3/review

Gonna write up some more indepth explanation of it.

I updated my storyline to the latest version and registered both plugins, but I am still getting the loading error in the console. Could it be a plug in is corrupt? or a variable wrong?

console log - MotionPathPlugin.min.js:10 Uncaught TypeError: Cannot read properties of undefined (reading '0')