Entrance animations are driving me crazy

Aug 24, 2022

Edward Agadjanian
By Edward Agadjanian

Can someone tell me why the entrance animations for the objects on-screen don't allow for the entrance to start from the bottom of the object rather than the bottom of the screen? Seems very dumb and counter-intuitive that the animations are always coming from the edges of the screen. Why doesn't Articulate allow us to produce the entrances from the edges of other objects for it to look more natural? Or am I doing something wrong? 

Here's an example: I'm trying to get a window to pop up from a desk that's situated close to the center of the screen. Whatever animation I've tried though, the window is always originating from the bottom of the screen rather than the top of the desk. Again, very counter-intuitive. 

7 Replies
Math Notermans
over 1 year ago08/25/22 at 10:46 am (UTC)

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

st1

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

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

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.

st4

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.

Edward Agadjanian
over 1 year ago08/25/22 at 3:24 pm (UTC)

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.

Math Notermans
over 1 year ago08/25/22 at 3:39 pm (UTC)

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

Edward Agadjanian
over 1 year ago08/25/22 at 3:44 pm (UTC)

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.

Sign In to Reply