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...
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 variablesvar 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')
Timing probably is the main issue. In my setup i count and check whether all scripts are loaded. When that is true i set a variable and when that changes...i know all needed scripts are loaded and i can register and do anything needed. I do think here the scripts never get fully loaded at the moment when registering the plugins. Trying to fix it in your setup now.
Im gonna change it to my approach on loading external scripts... yours should work...but doesnot... lets see if that helps.
There is something really fishy in your setup...as i publish it with your code and my loading setup...it fails too. If i however publish an older version using GSAP Plugins...they work as before. So i will investigate further.Figured it out. Lines in Storyline are not pure SVG. That was the issue. When using a proper SVG it works fine...as you can see in this sample.
Yes, you solved the issue. I wrestled with this hoping I would figure it out, but needed your expertise. Thank you for your help!
