Entrance animations are driving me crazy

As all animations in Storyline use the GSAP Javascript tweening engine on the backend, you can too.

So how to do this ?

First you need to select the elements you want animated... in your case... a window to pop up...and an desk close to the center.

First i quickly created assets...



And imported them into Storyline as .pngs
In the image below you see it in Storyline. Notice i have the window Size and Position open to check the 'accessibility names' of elements.


popup.png is our popup window that we want to show up from behind the desk...or the monitor or whatever...

Now i add a 'execute Javascript' trigger at timeline start.


As selector for the popupwindow image is use the accessibility name:
let popupWindow  = document.querySelector("[data-acc-text='popup.png']");

Then i use gsap.set to immediately set the visibility of the image to 0.
gsap.set(popupWindow, { autoAlpha:0 });

Now at start it is invisible, and you can either at a click or at a specified time show the image again... scale it, rotate it...do anything with it you want. Either reposition it near the desk manually...or script it so it moves there first and then shows and scales.

For ease i repositioned it and added a scale and ease to it.
let popupWindow  = document.querySelector("[data-acc-text='popup.png']");
gsap.to(popupWindow, { duration:1.5, scale: 1.25, autoAlpha:1 ,ease: "bounce.out"});

Do notice the differences. gsap.set has no duration...and immediately sets something.,.,, whereas gsap.to tweens / animates a specific value with a duration.



Here you can see the endresult...
https://360.articulate.com/review/content/d4ebc032-ed70-407c-8b34-bd61d88327a1/review

Check my posts on GSAP to learn more.