Forum Discussion
GSAP 3.5.1 ( latest version ) is now included in Storyline 360
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 selectorvar 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 :-)