GSAP, x-y transformation in the Modern Player

Mar 12, 2021

Math Notermans
By Math Notermans

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...

48 Replies
Math Notermans
7 months ago10/17/23 at 3:14 pm (UTC)

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.

Math Notermans
6 months ago10/21/23 at 8:20 am (UTC)

When using the console, you can test directly in the console whether some code works.
Like this...

Step 1: Get your selector or JS path ( either will do ). Right click any element to get this popups.

gs1

Step 2: You now have a line of code like this:
document.querySelector("#next");

Step 3: Use some GSAP animation on it. Like this:
let nextBttn = document.querySelector("#next");
gsap.to(nextBttn, { duration:0.5, autoAlpha:0 });

Step 4: Test it in the console by pasting it inthere. As seen here:
gs2

Step5: Press ENTER and you see your code executed. Notice the next button disappearing in 0.5 seconds. And thus this will work when using it in Storyline too.

gs3

larry van wave
6 months ago11/01/23 at 5:20 pm (UTC)

I have a project that I am working on that the buttons work for Desktop use, but the mobile use - mobile Chrome - the button doesn't work. Is there an extra listener or code that I need to apply?

//== code below  ===


submitButton.forEach( item => {
      item.addEventListener('mouseover', OverSub_01 );
      item.addEventListener('mouseout', OutSub_01 );
      item.addEventListener('click', PressSub_01 );
});

function OverSub_01 ( event ) {
  gsap.to(submitButton, .5 ,{alpha:.6, ease: "back.out(1)"});
}

function OutSub_01 ( event ) {
  gsap.to(submitButton, 1 ,{alpha:1, ease: "back.out(1)"});
}

function PressSub_01 ( event ) {
  gsap.to(CorrectAnswer, .5 ,{x:"-2%", ease: "back.out(4)"});

}

Merve Satmaz
6 months ago11/10/23 at 11:08 am (UTC)

Hello Math,
I want to make an animation, but I couldn't make it happen. I couldn't adjust the Y position as I wanted. When I hover over the button, I want it to slide to the top a little and when I move over it, I want it to come back to its place, but it didn't work exactly the way I wanted. Do you have any ideas about this?

https://360.articulate.com/review/content/395de61b-fe88-4577-8c4d-142ab63c5745/review

Math Notermans
6 months ago11/10/23 at 12:07 pm (UTC)

Funny... but onhover and changing x/y position is offcourse something awkward. The moment your y-value changes enough the hover returns false and thus the action will be stopped and the element returns to its original position. So to achieve what you want, you need to hover a hotspot...and trigger another element.

larry van wave
6 months ago11/10/23 at 3:18 pm (UTC)

I am trying to have a graphic item in storyline follow or replace the mouse, but I am running across the situation that the mouse tracking is going off - it seems to be tracking the full screen size and just not the slide window. Is there a fix for this? File that I have been testing is attached, any help is much appreciated.

Sign In to Reply