Forum Discussion
Animate Storyline Groups with GSAP
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 Storyl...
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,
MathHi 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 ofquerySelectorAllin 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 ofx:"+=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.
