Hi Guys,
I'm creating a website where I have to animate (approx. 50) svg lines from bottom to top of the screen in different tempi. I made it with staggerFromTo, but then I can't randomnize the the speed of each lines (se the attached image). Now I'm trying to create this with a for loop where i add tweens to a timelineMax, but I cant get it to work
var thinLineArr = [];
var num = Math.ceil(ww/lineThickness);
transitioncontainer.css({'height':wh});
// Adding all the lines to the scene
var svg = '<svg id="transition-top-svg" version="1.1" xmlns="http://www.w3.org/2000/svg">';
for (var i = 0; i < num; i++) {
var line = '<path class="transition-line" d="M ' + (lineThickness * i) + ' 0 l 0 ' + wh + '" />';
thinLineArr.push($(line));
svg += line;
};
svg += '</svg>';
transitioncontainer.append(svg);
//Starting Scrollmagic
var timeline = new TimelineMax()
for (var k = 0; k < num; k++) {
timeline.add(TweenMax.from(thinLineArr[k], 2, {scale: 0}));
}
var scene = new ScrollMagic.Scene({
triggerElement: "body",
duration: 1000,
offset: 100
})
.setTween(timeline)
.addTo(scrollMagicController);