user2163224 user2163224 - 6 months ago 9
HTML Question

How do I display the order of list items randomly?

I have the following code, which works when I use divs instead of list items. However I can't figure out how to randomly fade in the order of the list items.
I am using plain Javascript and Greensock (TweenMax) in order to animate the items.

CODEPEN: http://codepen.io/dada78/pen/fd4f35272d48df628148f98c4a9e5459/

In my HTML I have:

<div id="spots">
<ul>
<li class="square"></li>
<li class="square"></li>
<li class="circle"></li>
<li class="square"></li>
<li class="square"></li>
<li class="circle"></li>
</ul>
</div>


In my Javascript:
var spotsAll = document.querySelectorAll("#spots");

var tl = new TimelineMax();
tl
.set(spotsAll, {autoAlpha:0})
.add(spotsIn);

function spotsIn()
{
var spotsArray = [0, 1, 2, 3, 4, 5, 6];
for(var i = 0; i < spotsArray.length; i++){
tl.to(spotsAll[i], 0.5, {autoAlpha:1, ease: Back.easeOut.config(1.8)}, Math.random());}
}


Thanks so much for any suggestions!

Answer

Your spotsAll's selector is incorrect. You're just selecting the outer div.

To fix it, just change the spotsAll selector to this:

var spotsAll = document.querySelectorAll("#spots li");