Forum Discussion

MathNotermans-9's avatar
MathNotermans-9
Community Member
3 years ago

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...
General E-Learning
MathNotermans-9's avatar
MathNotermans-9
Community Member

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

JasonBarr's avatar
JasonBarr
Community Member
3 years ago

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.

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    3 years ago

    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 querySelectorAll in 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 to y:"+=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.

Related Content