Selecting Groups of elements with Javascript by Class

Jan 06, 2023

On LinkedIn Jeff Bat showed a video about GSAP animation in Storyline and showed how to use 'accessibility texts' to select an element and animate it. Another user replied this doesnot work for him as they need those accessibility text fields for accessibility and cannot change them at will. Ofcourse there are quite some other ways to select an element in Storyline, but untill recently they were quite complex. But a few updates ago Articulate changed the way groups work and now you can add elements in existing groups. As is, this already was great, but now it seems they even improved it more. The newly created groups do have classNames and thus are easily selectable by Javascript.

As all groups in Storyline have the same className 'group' you can select them all by this code.
var allGroups = document.getElementsByClassName('group');
Then you can trigger any of the groups and animate it with GSAP.
gsap.to( allGroups[0].parentElement, { duration:3,  rotation:360 });
So no worry about interfering with your accessibility anymore.

On this LinkedIn post https://www.linkedin.com/feed/update/urn:li:ugcPost:7017134712749973504/
you can see it somewhat more explained.
And here is the Storyline file.

PS. a Feature Request i have is adding a 'groupsname' option to the 'grouping' option in Storyline. It gives us developers more options to use customgroups and select them in quite some variations. I do like they all called 'group' as that makes it easy to select all.... but would like to have a class added when a user adds a custom name. 'group myname'. As i can do that with Javascript im making a sample to show.

5 Replies
Math Notermans

But all this still is in the accessibility text field and that actually was what i was trying to avoid...because often that field needs to be descriptive and thus not good to use for code and scripting. So i tried avoiding changing the data-acc-text fields for that and adding classes to groups.

Math Notermans

In fact i donot act on the div with the accessibility text.. if you check my other sample listed here you see i get the child of it...so no interference whatsoever with accessibility.

gr1

Apparently didnot share this one,,,, here it is...
Aha...that one was here...
https://community.articulate.com/discussions/articulate-storyline/feature-request-groups-names