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.

Perhaps a quicker method is to create a small scrolling panel, and place the object inside it. Then the animation starts from the margin of the panel, rather than the slide.

I just don't understand why this simple animation has to be made so complex by Articulate Storyline. That honestly sounds like a total headache. I'm not a coder. I'm an instructional designer. Most programs would have the object wipe in from the bottom when it's selected to wipe in from the bottom.

Instructional designers shouldnot make animations. ;-) They should describe what they want visualised in an animation and then let a designer ...better an animator make it...and in the end the developer puts all together...

I understand however where you come from...
if you want to wear all these hats..you have to cope with all that comes with it ;-)

Oftentimes, the role comes with all of the hats.

Anyway, I think I might have made it over-complicated. It should easily be able to wipe up if instructed. It's just that every object that was supposed to be grouped together had different animations and then animations before they were grouped. I was able to calm it down.

Thanks for your help though.