Animate Storyline Groups with GSAP
Sep 18, 2022
Continuing on my series about animating with the GSAP library in Storyline360 i am focusing now on groups of elements in Storyline. As we all know its quite tough to get animation directly in Storyline exactly as you want it, especially when grouping Objects. Well with GSAP you can tackle any group exactly the same as your normal elements. Ensure you can select it properly, either by using the 'accessibility name' or in anyother way, and you can trigger the same animations you use on simple elements.
Here you find my GSAP Storyline tester to accompany this post.
https://360.articulate.com/review/content/7224b214-e6bc-4111-9821-9c96c0d0aa03/review
First thing you can try is changing the rotation and duration and check SL-Group g1 or SL-Group g2. Click 'run gsap animation' and you will notice the complete group nicely animates.
Ofcourse you can change the transformation center for the complete group as before. Clicking the circular transformation point tool to see its orientation
change. Do notice that you can enter pixel values and thus the orientation point of the rotation will be outside of the bounds of the group. Learned that myself only recently.
Inside the groups are buttons included. The controls in 'Innergroup' influence the parameters for those buttons. Changing duration, x and y scale will change the animation when clicking those buttons. Notice that also the transformation point works nicely. Thus being able to scale a group from any of its borders.
Adding an ease to your animation can really improve it big. A list with several eases available in GSAP and Storyline360 is selectable. Only works on the 2 Innergroups and the scaling for now. Best detectable when using a short duration and change the ease on an element. In the gif above you can see some of those differences, especially noticeable on the bounce and elastic ease.
GSAP especially shines when you try to use multiple animations together. Notice in this gif that whenever you make your duration for a rotation long enough, you can click the Innergroup buttons and the animations still work perfectly smooth. The Gif has more trouble playing then the GSAP animation ;-)
Adding the Storyline for the adventurers amongst us...
5 Replies
Math, this is amazing. If only the GreenSock animation library was natively implemented in Storyline.
As someone who is just learning Javascript, do you have any tutorials on implementing simple animations in storyline? They wouldn't have to be complex, but just enough to do the basics. For example, increasing or decreasing the size of an object.
Keep up the great work!
Hi Griffin, actually Articulate Storyline 360 has the GSAP library natively implemented and all animations a user does in Storyline including entrances, transitions and things on the timeline are internally done by GSAP. Do check my other posts on GSAP on the forum, a lot on it including how to manage sizing elements.
15,17 and 18 November im giving workshops on GSAP in Storyline at the Articulate Usersdays overhere in Belgium and the Netherlands. Also working on a accompanying website with all kind of tutorials for Javascript in multiplayer games and GSAP in Storyline.
I think my posts on GSAP on the forum are the best way to get started with it in Storyline. Although a basic Javascript course or tutorials are fine, you always need to be aware of specific quirks Storyline imposes on Javascript. Scope for example and things like that.
Kind regards,
Math
Hi Math,
I have an animation successfully moving across the screen when I click the play button.
On the play button, I execute a javascript:
let myElement = document.querySelectorAll("[data-acc-text='myName']");
let tween = gsap.to(myElement, {duration: 2,scaleX:2,autoAlpha:0.5, x: "+=500"});
I then have a pause button executing:
tween.pause();
and a reverse button executing:
tween.reverse();
These two buttons do not work. I've read on your other post that each trigger has its own scope, which I am assuming is causing this problem. Could you let me know how I can get this working properly? I am just a beginner in javascript so I am surprised that I even got as far as I did with this.
Great you got that going...thats a good start :-)
Indeed it is scope thats preventing this to work. Each trigger creates its own function inside the user.js script Storyline creates when using Javascript. And if you not manage that a function doesnot know anything about the variables used in another function.
Luckily its quite easy.. just pass the tween to a Storyline variable and get that var in the other buttons and your done.
Also want to point out the use of
querySelectorAllin your script. As this selects all elements with the acc-name 'myName' it is something to be aware of. I add some buttons in my sample to show how to select one of the 'myNames' if you have more.https://360.articulate.com/review/content/3c69bf9b-a1ac-443a-b92d-7711af3825eb/review
Also be aware that the use of
x:"+=500"( or as i changed it toy:"+=300") animates the selected element relatively to its current position + the amount given. So clicking the buttons multiple times will cause a shift and hard to reverse it to the original startposition.Hey Math,
I appreciate the reply. I'll rummage through your form posts as I have been doing. I'll also keep an eye out for your website too. I could definitely see some basic video tutorials on Javascript animations in Storyline being a big help. While my Javascript knowledge is limited, let me know if you would like to partner in creating videos on the subject.