Jump to content


Basic Stroke animation

Recommended Posts

Dear All,


Making my first steps in GSAP world and loving it - but now the questions start. I get the concept of animating SVG objects .from .to (loving it), get the principles of Bezier, and understand the potential  of morphing - but I’m not sure which is the best way to go about the following ... would appreciate your guidance


I’d like to make a simple animation of a line (stroke), I’d like it to go through a number of keyframes - back in the day I’d create a stroke with a number of nodes (illustrated here with red & blue dots) and then animate the following key frames ...


KF1 : blue nodes displaced 90 degrees




KF2 : blue nodes back in original position




KF3 : nodes 5-7 displaced to create the following



So how would I bet go about doing this in GSAP - again your feedback would be brilliant

Thanks in advance

Link to comment
Share on other sites

Thank you for your help OSUblake - really appreciate it

  • i get where you are coming from with the declaration of p1-p3
  • get how you are tweening the p2 with attr{}

but I'm having trouble adding the next tween (e.g the tween from kf 2 to kf 3) ... do I ad another attr:{},or is this more of a timeline event (e.g how do I create multiple polyline keyframes)



Link to comment
Share on other sites

A timeline would be best. So you could do something like this, and they will play sequentially. 

var tl = new TimelineMax()
  .to(polyline, 1, { attr: { points: pointsForKF1 }})
  .to(polyline, 1, { attr: { points: pointsForKF2 }})
  .to(polyline, 1, { attr: { points: pointsForKF3 }})


If you need help, try putting what you have in demo.

  • Like 4
Link to comment
Share on other sites

Oh that is so cool.

Thank you for all your help 

Really appreciate it

  • Like 1
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.