Scrollmagic/tweenmax, animating multiple svg paths on scroll

[cubanpete 0 Likes (Newbie)]

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

 

See the Pen xVYGrj by cubanpete (@cubanpete) on CodePen

[Carl 9,066 Likes (Superhero)]

Hi and welcome to the GreenSock forums,

 

It really helps if you can create a reduced test case using CodePen or jsfiddle.

If ScrollMagic is not directly related to the problem, leave it out entirely.

 

Here are some instructions to get you started: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks

[cubanpete 0 Likes (Newbie)]

Thanks Carl, I've made a simple pen, that shows what my code looks like....

[Carl 9,066 Likes (Superhero)]

Hi Cubanpete,

 

Thanks so much for the demo. Sorry this took a little while to see.

 

From what i can tell the things you are putting in your thinlineArr[] aren't really valid DOM elements that can be targets of tweens

 

for (var i = 0; i < num; i++) {
  var line = '<path class="transition-line" d="M ' + (lineThickness * i) + ' 0 l 0 ' + wh + '" />';

// not so good

  thinLineArr.push($(line));

  svg += line;
};

I found that targeting those elements AFTER they are added to the SVG works fine:

 

var timeline = new TimelineMax()
$("#transition-top-svg .transition-line").each(function(index, element){
   timeline.from(element, 1, {scaleY:0}, index * 0.1)
})

http://codepen.io/GreenSock/pen/BKYbGd?editors=0010

[cubanpete 0 Likes (Newbie)]

Hey Carl, 
this is awesome, thanks a lot, it was what I was looking for:) I'll buy you a beer some day

Kasper