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

I used the gsap hitTest but it's not working. I'm sure I'm doing something wrong. I first set the targetElement and hammerElement positions when the timeline begins:

var targetElement = document.querySelectorAll("[data-acc-text='targetBox']")

var hammerElement = document.querySelectorAll("[data-acc-text='hammer01']")

gsap.set(targetElement, {x:500, y:200});
gsap.set(hammerElement, {x:500, y:800});

and then I call this when user hits up key:

var hammerElement = document.querySelectorAll("[data-acc-text='hammer01']")

var targetElement = document.querySelectorAll("[data-acc-text='targetBox']")

gsap.to(hammerElement, .25,{y:"-=200", onUpdate:checkHit});

function checkHit() {
if (Draggable.hitTest(hammerElement, targetElement)){
gsap.set(targetElement, {x:500, y:100});
}
}

The hammerElement moves as it should but the function isn't working.

Well all is possible. One very particular thing to know is that the 'data-acc-text' attribute works similar to a classList. So using spaces in the data-acc-text attribute will make it work like a list with multiple classes. So i changed your elements to 'swatch 1' .. etc, etc. Although i loved Actionscript in Flash and worked for years with it i removed the _mc part... Reminded me a bit too much of the good old Flash days ;-) So i can now select all swatches with a single selector

var allSwatches = document.querySelectorAll("[data-acc-text*='swatch']");

or select any specific swatch at will....

document.querySelector("[data-acc-text='swatch 03']");

Now i can just loop all swatches at will.

var swatchStr = "swatch";
var allSwatches = document.querySelectorAll("[data-acc-text*='"+swatchStr+"']");
console.log("allSwatches length: "+allSwatches.length);
var swatchAtt = allSwatches[0].getAttribute('data-acc-text');
console.log("swatchAtt: "+swatchAtt);

for (i=0; i<allSwatches.length; i++){
i < 4 ? swatchX = allSwatches.length + i*120 : swatchX = allSwatches.length + (i-4)*120;
i < 4 ? swatchY = 530 : swatchY = 465;
gsap.fromTo(allSwatches[i], {duration: 0.3, x: swatchFromX, y: swatchFromY}, {x: 5, y: swatchY});
gsap.fromTo(allSwatches[i], {duration: 0.3, x: 5}, {x: swatchX, delay: 0.3});
}

Added it working.
Happy scripting :-)

I love the way you used the built-in accessibility name functionality to be used as an item locator. Very creative!

Thanks! I'll be watching this thread. I've been using GSAP in the "other" authoring tool and am in the process of figuring out how to use it in SL360. I'm not as fancy as you all are, but I'm missing those eases something fierce :-)

I'm curious, when I try to use the Object intersects event with the tweened object and a static object on screen nothing happens. Does Storyline not see the tweened object's position? 

Yeah I tried the built in object intersect feature. Here's the sample.

One thing you have to keep in mind for sure is, the way javascript selectors workin Storyline. querySelectorAll selects ALL elements with a given attribute. When i have some time i make a sample of it.

Another thing to keep in mind is, that it is hard to directly set a state with Javascript. You would need to set a variable...and add a Storyline trigger to change the state whenever that var changes.

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});
}

Thanks Math, I've now gotten it to work with the above method, selecting the element dynamically in each iteration of the loop rather than attempting to dynamically reference pre-assigned element vars; see the attached for examples of working code and commented failing code.

Would still be good to figure out how to dynamically refence inside the gsap call, but not sure if that's possible in Storyline.  Looks like it's very hard, if not impossible, to reference/target elements and sub-elements; quite definitely can't replace Animate CC with Storyline!

And to show that also a style change as commented out in your sample is easy enough...

var swatchSVG = document.querySelector("[data-acc-text='swatch 3'] > div > svg > g > path");
gsap.to(swatchSVG, {duration:2, fill:"#C0504D" , strokeWidth:5,stroke:"#FF0000"})

Added too...