Classnames to act on in Storyline

I'm out of town now. Will check it when I'm back home 🍹

Basically its easy. For the 2 elements with a acc-text you can use a selector that uses part of the description to find and select the element.

The code below triggers the red fire extinguisher to get selected and animated.
let extinguisher = document.querySelector("[data-acc-text*='Powder Extinguisher']");
gsap.to(extinguisher,{duration:1,scale:0.7,rotation:32, repeat:-1,yoyo:true});

Notice the *= in the selector. That means it will select ALL elements with 'Powder Extinguisher' in the acc-text. If you have multiple elements with that in the acc-text you get a HTML-Collection and need to select the one you want. Eg. extinguisher[0]...

I will add a sample of that in the Storyline.

For the 3rd image its similar.
let asbestos = document.querySelector("[data-acc-text*='Friable asbestos']");
gsap.to(asbestos,{duration:1,scale:0.7,rotation:32, repeat:-1,yoyo:true});

The first image however is not selectable with this approach. However there is another way for that. If you dive into how a page is build up in HTML with the browser inspector you will discover the layers in the Storyline are build up from the bottom. As shown in this image.


So with some Javascript you can select any layer.
First at the start of the timeline you add code to get all elements visible on the Storyline timeline.
var allTimelineElements = document.getElementsByClassName('slide-object slide-object-vectorshape shown');
var player = GetPlayer();
player.SetVar("allTimelineElements",allTimelineElements);
Add a variable to hold those... and set it to the just collected timeline elements.
Now you can select any visible element on the timeline.

Do remember scope in Storyline. So we are getting the elements from the variable.
var player = GetPlayer();
var allTimelineElements = player.GetVar("allTimelineElements");

Offcourse you could also get all elements in the current trigger, but that is a lot of code without proper reuse.

Using the logic shown in the image this will select and animate the image without any acc-text.
Notice i use [1] to select the element on position 1 of the HTMLCollection.

var frame = allTimelineElements[1];
gsap.to(frame,{duration:1,scale:0.7,rotation:32, repeat:-1,yoyo:true});

Adding the Storyline now. Will make some sample on how to stop looping GSAP animations soon.