Multiple Animations to an Object in Storyline 3?

May 29, 2019

Hello, all,

After using Captivate for about 9 or 10 years, I'm slowly dipping my toes into the Storyline pool. So a quick question:

Is it possible to add more than one animation to an individual object? I noticed that the question has been posed here several years ago (5-7 years I think?), but I can't seem to find a more recent answer.

Thanks.

4 Replies
Eric Rowland

Hello Michael, 

Yes you can have Motion Paths set to trigger when you want them. Take a look:

When the timeline starts, I have a shape moving down. Then when the timeline reaches 5 seconds, I have it moving in an arc motion path. 

You can set this to trigger on almost anything - not just timeline, but different interactions and states of objects. Really cool stuff! 

Hope this helps! 

 

Nancy Woinoski

There might be a way to do this. Add a fade animation to your object and then group the object with another object and then add the fly in animation to the group. 

If you don’t want the second object to show, make it transparent.

I have not tried this so can’t guarantee it will work but it’s worth a shot.

Math Notermans

Better use GSAP for that cause its 2000% better controllable then any default Storyline type of animation. Under the hood Storyline infact does use GSAP for all its animations.

And in fact its easy...

First you have to select your element. As Storyline removed jQuery you have to use standard selectors. So for example...if your imported image is named... pencil.png
you can select it by using...
var element2Animate = document.querySelector("[data-acc-text='pencil.png']");

Then you can use GSAP ( built into Storyline ) to animate it.
gsap.to(element2Animate ,  {duration: 3.5 , x:"+=600",scale:1.65});
The code above moves the element to +600 from its current position in 3.5 seconds and scales it up to 165% of its original size.

Want to fade it in or out at any moment ? Use autoAlpha... 1= fully visible, 0= invisible.
gsap.to(element2Animate , {duration: 1 , autoAlpha:0.25});
If you add these codes on any trigger or button or wherever, they will influence your object perfectly and using GSAP for animation is as said far more precise and better then the built-in tools.

Other methods are possible too. Timelines for controlling and sequencing animations... call function on end of an animation, reversing, speeding up and down... Possibilities are endless and i gladly help.

If you want eg. to have you object set invisible at start and then fade in and move... this code will do...
// set sets the element to a specific value immediately invisible and scaled down here
gsap.set(element2Animate , {autoAlpha:0,scale:0.65});
// then with to we animate it to whats needed..eases give some specific ease-effects
gsap.to(element2Animate , {duration: 2 , x:"+=600",scale:1,autoAlpha:1,ease: Bounce.easeOut});

Check out this sample of the possibilities. Storyline file added.
https://360.articulate.com/review/content/8443b416-abc5-4bdb-ae44-511126382e10/review