Jump to content
GreenSock

cubanpete

Scrollmagic/tweenmax, animating multiple svg paths on scroll

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

post-43360-0-47165100-1460227955_thumb.jpg
 
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);

 

post-43360-0-47165100-1460227955_thumb.jpg

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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

  • Like 3
Link to comment
Share on other sites

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

Kasper

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×