Forum Discussion

MathNotermans-9's avatar
MathNotermans-9
Community Member
2 years ago

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.

storyline 360
  • Jürgen_Schoene_'s avatar
    Jürgen_Schoene_
    Community Member
    2 years ago

    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

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    2 years ago

    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.

  • Jürgen_Schoene_'s avatar
    Jürgen_Schoene_
    Community Member
    2 years ago

    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 !

Related Content