Jump to content
Search Community

Drawing Lines Sequentially

jaeeun test
Moderator Tag

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



I have a site with a simple vector map, and I'm trying to draw lines on it that show up sequentially.


I've gotten this much so far;


See the Pen aEFDw by anon (@anon) on CodePen


But I can't figure out how to show the lines one after another. I thought maybe I could do it using TweenMax.


I'd appreciate any leads!
Link to comment
Share on other sites



One choice would be to create a timeline and add the function that draw the lines in the sequence you want and with the desired delay using delayedCall.


Perhaps this previous post might come in handy:




Keep in mind that the delayedCall method returns a TweenLite instance so if you want the lines to animate without any delay between each other besides it's own duration, there's no need to add an extra delay time between the instances, the engine takes care of things.




Link to comment
Share on other sites



You should keep in mind that GSAP animates CSS properties and tweens any numeric values an object may have, but it doesn't directly draw lines.


What you can do is use GSAP timing mechanism to draw the lines with the correct given data. Yake a look at this post:




Check the stackoferflow link and the amazing codepen made by Carl is a must see, so you can check how simple is to use the engine for those purposes and that the heavy load comes with getting the SVG paths correctly.




Link to comment
Share on other sites

Now I'm trying to follow the codepen drawing that Carl made, and this is my codepen where I'm testing it;


See the Pen CDHoB by anon (@anon) on CodePen


The thing is, that the only the last javascript code is getting executed.


Sorry if this is something really basic, but I'm new to javascript, let alone tweenmax.



Link to comment
Share on other sites

Thanks, but not sure if that's what I'm trying to do. Please look at this page (you have to scroll down and wait for a few seconds)




I don't know if it's superscrollorama issue or tweenmax issue, but you can see that the lines are already drawn when you load the page, and if you scroll down they begin to draw again. I'd like the page to be blank when it's loaded and then the lines begin to draw.

Link to comment
Share on other sites



Unfortunately we're not superscrollorama experts, but one thing that you could try is create the timelines paused, like this:

orig1.style.stroke = '#f60';

var t1 = controller.addTween(
	(new TimelineLite({paused:true}))
TweenMax.to(obj1, .5, {length:obj1.pathLength, onUpdate:drawLine1, delay:4,ease:Linear.easeNone})
function drawLine1() {
  orig1.style.strokeDasharray = [obj1.length,obj1.pathLength].join(' ');


Question, have you tried without superscrollorama?. Try creating a master timeline that is paused, then create individual timelines or tweens to draw the lines, then nest those tweens/timelines to the master one with the add method and with an event play the master timeline, if that works what you could do is create a dummy tween that lasts 0.0001 seconds, add that to superscrollorama and add an onComplete callback to play the master timeline, not pretty but it could work.



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.
  • Create New...