Sorting Activity in Storyline Similar to Rise

Mar 14, 2023

Merve Satmaz
By Merve Satmaz

While working on Rise, I dreamed of having the sorting activity animation of Rise in the storyline, but unfortunataly because of the limited animation options, it was not possible. I thought it could be done with GSAP.

I want to distinguish it a little bit more from the standard sorting activities we already use.I tried to simulate it by trying many animation code blocks and designed this activity to draw attention to one the biggest problems of today, global warming.

See it in action.

6 Replies
Math Notermans
1 year ago03/14/23 at 12:11 pm (UTC)

For sure nice.. some tips...

In your code you use document.querySelectorAll( ) instead of document.querySelector. There is quite some difference in what it returns. querySelector returns just 1 element, whereas querySelectorAll returns a collection of elements.

Without seeing your storyline its pure guessing, but i do notice these calls showing up a lot...

var theObject = document.querySelectorAll("[data-acc-text='box']");

gsap.to(theObject, {
duration: 0.8,
opacity: 0,
y: 1100,
stagger: 0.1,
ease: "back.down"
});

Here document.querySelector("[data-acc-text='box']" ); would be better as you have all your elements uniquely named.

One approach to use is creating a function that does the work. You could add that to an external script and then call it at any slide at any time. Ofcourse you could pass along multiple parameters like the duration and change in y position.
That could be something like this:

tweenElement("box");

function tweenElement(_accName){
var target = document.querySelector("[data-acc-text='"+_accName+"']");
gsap.to(target, {
duration: 0.8,
opacity: 0,
y: 1100,
stagger: 0.1,
ease: "back.down"
});
}

Another good thing is to learn the CSS selectors somewhat better. As i said document.querySelectorAll selects all elements with a specific name.

You could change the acc names for your elements to something like this..
"box 1", "box 2", "box 3".
Notice the spaces i use in the accessibility names. Storyline treats these spaces as a separator and makes multiple classes out of it. Thus now you can make really good use of the querySelectorAll.

Elements in your story eg.
'box 1','box 2','box 3','box 4','box 5'

Now you can select all by using this code...

var boxCollection = document.querySelectorAll("[data-acc-text*='box']");

for (var i=0; i<boxCollection.length; i++){
tweenElement(boxCollection[i]);
}


Do notice that i use querySelectorAll and a * in the parameter. This will select all elements that contain the string 'box'. So 'box 1' till 'box 5' will be targeted. The for loop ensures all will be tweened. if you want to target one of the boxes use either a index of the collection...
tweenElement(boxCollection[2]);
or target the specific element...

tweenElement("box 2");

Sign In to Reply