Any suggestions on best practices for multi-point animations? I am new to animating in storyline. Here is an example:
animate object A to point A,
then move object A to point B
then move object a to point C
then fade object out.
Can I do this all with one object? Or do I need to use different objects to achieve this effect? It seems as if the built in animation tools and motion paths only allow one start point and one end point. Other software tools (E.g. Adobe Premiere, AnimateCC) commonly use keyframes to allow multi-point animations. Thanks for any advice!
For animation i always use GSAP from Greensock. As i discovered recently Storyline uses an older version of GSAP ( TweenLite 1.18 ) for all its animations. Although you have to know Javascript to use GSAP/TweenLite its far more powerfull and flexible then animating in Storyline. And you can do quite a bit more.
Whats needed to animate an element onscreen in Storyline?
First of all you need to select your element. So you need some access to it with JS. The accessibility names (Alt Text ) are your weapon of choice here. Give your object a specific name...eg. "object2Animate"
Next step is triggering your animation...with a button or anyother way... The 'Execute Javascript' trigger on your button can have a Javascript like this:
var myObject2Animate = document.querySelectorAll("[data-acc-text='object2Animate']") TweenLite.to( myObject2Animate , 0.5 ,{autoAlpha:0.75,scaleY:1.5,x:"+=50"});
This code will animate your element to +50 pixels of its current position, scale it up to 1.5 times its vertical height and make it semi-transparent.
A few things to watch. 'document.querySelectorAll' selects all elements with the acc-name object2Animate, so if you have multiple objects named like that...it will move all..
Motion paths and all the animation inside Storyline in the end is done by GSAP's Tweenlite. Even the timeline in Storyline uses GSAPs code under the hood.
I would love if Articulate updated the used GSAP ( 1.18 is from 2014 !!!! ) to the newer GSAP 3.2.
Im gonna make a sample using TweenLite to show the actions/animations mentioned in your question.
As mentioned i make a sample showing how to use GSAP/Tweenlite to get this done... Here it is. Alas Articulate doesnot use the latest version of GSAP, because then you could create animations much much easier. But well, anything is possible with this for sure...
Thanks for the very useful information! As a matter of fact, I already use Greensock for e-learning development. For seven years or so I have been using Adobe Animate along with Greensock to create all of my SCORM 1.2 e-learning courses. However, my current client is requiring Storyline. I have already been successful integrating Greensock interactions into storyline using the web object approach. But your approach is definitely something to consider.
While I have your attention, are there any easing options native to storyline that come close to all of the easing options you have in GSAP? See the easing visualizer link below.
Yes and no. TweenLite is included in Storyline360, i do know several GSAP eases do work... Bounce.in and out for example. As Articulate uses a old version of TweenLite its limited to whats inthere. Offcourse you can always add any version 3 custom eases if you add them via Webobjects.
6 Replies
You can do with different motion paths using relative start points
Thank you! I simply did not catch that.
For animation i always use GSAP from Greensock. As i discovered recently Storyline uses an older version of GSAP ( TweenLite 1.18 ) for all its animations. Although you have to know Javascript to use GSAP/TweenLite its far more powerfull and flexible then animating in Storyline. And you can do quite a bit more.
Whats needed to animate an element onscreen in Storyline?
First of all you need to select your element. So you need some access to it with JS. The accessibility names (Alt Text ) are your weapon of choice here.
Give your object a specific name...eg. "object2Animate"
Next step is triggering your animation...with a button or anyother way...
The 'Execute Javascript' trigger on your button can have a Javascript like this:
var myObject2Animate = document.querySelectorAll("[data-acc-text='object2Animate']")TweenLite.to( myObject2Animate , 0.5 ,{autoAlpha:0.75,scaleY:1.5,x:"+=50"});This code will animate your element to +50 pixels of its current position, scale it up to 1.5 times its vertical height and make it semi-transparent.
A few things to watch. 'document.querySelectorAll' selects all elements with the acc-name object2Animate, so if you have multiple objects named like that...it will move all..
Motion paths and all the animation inside Storyline in the end is done by GSAP's Tweenlite. Even the timeline in Storyline uses GSAPs code under the hood.
I would love if Articulate updated the used GSAP ( 1.18 is from 2014 !!!! ) to the newer GSAP 3.2.
Im gonna make a sample using TweenLite to show the actions/animations mentioned in your question.
As mentioned i make a sample showing how to use GSAP/Tweenlite to get this done...
Here it is. Alas Articulate doesnot use the latest version of GSAP, because then you could create animations much much easier.
But well, anything is possible with this for sure...
https://360.articulate.com/review/content/c9c0450c-0814-4492-bc02-5192e40017b9/review
Thanks for the very useful information! As a matter of fact, I already use Greensock for e-learning development. For seven years or so I have been using Adobe Animate along with Greensock to create all of my SCORM 1.2 e-learning courses. However, my current client is requiring Storyline. I have already been successful integrating Greensock interactions into storyline using the web object approach. But your approach is definitely something to consider.
While I have your attention, are there any easing options native to storyline that come close to all of the easing options you have in GSAP? See the easing visualizer link below.
https://greensock.com/ease-visualizer
Cheers!
Yes and no. TweenLite is included in Storyline360, i do know several GSAP eases do work... Bounce.in and out for example. As Articulate uses a old version of TweenLite its limited to whats inthere. Offcourse you can always add any version 3 custom eases if you add them via Webobjects.
This discussion is closed. You can start a new discussion or contact Articulate Support.