How do I display the order of list items randomly?

Question

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 1

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");