user2163224 user2163224 - 1 year ago 42
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.


In my HTML I have:

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

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

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

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

Thanks so much for any suggestions!

Answer Source

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