Forum Discussion
Selecting Groups of elements with Javascript by Class
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.
if you don't give the groups name it's possible to seach and find the groups
BUT with custom names
be careful when in addition you use groups in layer
=> simply give all groups in layer custom names, then they will no longer be found
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.
the "accessibility text field" with groups seems not used, they cannot be defined
the idea is, that you can use the untouched default values for the search
but the default values can change with ungroup/group !
Now to test how screenreaders act on groups with accessibilty texts. If they read them, they should be descriptive... if they don't no problem...
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.
Apparently didnot share this one,,,, here it is...
Aha...that one was here...
https://community.articulate.com/discussions/articulate-storyline/feature-request-groups-names
