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 :-)
Related Content
- 6 months ago
- 9 months ago
- 10 months ago
- 8 months ago
- 3 years ago