.thumb.jpg.45ad1f0654d8c8cd759c47599fe1796d.jpg)
How to create unique sub-tls with loop and add to main-tl
I have created a grid of rects in an SVG element and for each rect in the grid I'm trying to create a unique sub-timeline to add to a main timeline.
I haven't isolated the problem in the pen, but I will if necessary. Line 1–70 is just code for generating the grid, as far as I know, you can just ignore this.
The creation of timelines start at line 70. I have an array of 12 rects and I want to loop through them and create sub-timelines with random durations and add them to the main timelin
Using for loops can cause problems if you're not careful, like this thread.
http://greensock.com/forums/topic/14645-for-loop-returning-incorrect-counter-number/
That's why I always show people how to use arrays to do stuff like building timelines. There's an array method called reduce that does a really nice job of reducing a bunch items into a single item, i.e. a bunch of timelines into a single timeline.
function makeTls(parentTL) {
rects.reduce(function(parent, rect) {
var tl
