Forum Discussion

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

GSAP 3.5.1 ( latest version ) is now included in Storyline 360

A few months ago i discovered Storyline uses the GSAP Tweening library for all its animation features. Any animation you make in Storyline somehow is triggered by GSAP under the hood of Storyline. T...
storyline 360
LeeMulvogue's avatar
LeeMulvogue
Community Member
4 years ago

Hi Math, I've been a heavy GSAP user in Flash / Animate CC for years and just found this, wondering if you've figured out a way to resolve target elements from variables?

eg. say I have 10 buttons and I want to drive the animations via a looped array, "normally" you could target these by root["button"+i], but this results in "target undefined not found"

Example code; when targeted directly it works (all are named correctly), but can't figure out how to dynamically generate the target names in JS in Storyline?  Guessing the root=this declaration isn't right in the Storyline environment, but I can't find any references.

var root = this;
var swatchX = 0;
var swatchY = 0;
var swatchFromX = 0;
var swatchFromY = 120;

var swatch0_mc = document.querySelectorAll("[data-acc-text='swatch0_mc']");
var swatch1_mc = document.querySelectorAll("[data-acc-text='swatch1_mc']");
var swatch2_mc = document.querySelectorAll("[data-acc-text='swatch2_mc']");
var swatch3_mc = document.querySelectorAll("[data-acc-text='swatch3_mc']");
var swatch4_mc = document.querySelectorAll("[data-acc-text='swatch4_mc']");

for (i=0; i<5; i++){
 i < 4 ? swatchX = 5 + i*120 : swatchX = 5 + (i-4)*120;
 i < 4 ? swatchY = 530 : swatchY = 465;
 gsap.fromTo(root["swatch"+i+"_mc"], {duration: 0.3, x: swatchFromX, y: swatchFromY}, {x: 5, y: swatchY});
 gsap.fromTo(root["swatch"+i+"_mc"], {duration: 0.3, x: 5}, {x: swatchX, delay: 0.3});
}
  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    4 years ago

    With a sample i would have fixed this in less then a minute... Like this its guessing.. or rebuilding something alike...

    A few things i do notice...
    querySelectorAll : this gives ALL elements with the given attribute
    maybe that should be querySelector ( i can't tell without seeing a real Storyline ) or you need to loop the result or access a single one from the Nodelist it returns.

    The loop that animates the element(s) can be like this:

    var accStr = "swatch"+i+"_mc";
     var element2Animate = document.querySelectorAll("[data-acc-text='"+accStr+"']");
    gsap.fromTo(element2Animate, {duration: 0.3, x: swatchFromX, y: swatchFromY}, {x: 5, y: swatchY});

    A few remarks.. you might use GSAPs timeline it has quite some extra's that make life easier. And its included in Storyline's version.

    Also you can use vw and vh as relative values for position in Gsap in Storyline. That especially solves the x-position issues with the Classic and Modern player.

    If you share a file i gladly check it...

    Good luck... as a fellow long-time Gsap user...

Related Content