Basic Stroke animation

[gilesht 3 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

Assuming KF3 is just like you drew it, without any rotation, all you need to do for this is to animate the points attribute of a polyline. Here's a simple version, showing how to get the midpoint.

See the Pen 92e6c24374bdbfcb18223479648e0c43?editors=0010 by osublake (@osublake) on CodePen

 

[OSUblake 9,990 Likes (Superhero)]

You can also animate the points directly.

See the Pen 1d9c098e5f3809ae3d6c2f2238675e95?editors=0010 by osublake (@osublake) on CodePen

 

[gilesht 3 Likes (Newbie)]

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)

 

 

[OSUblake 9,990 Likes (Superhero)]

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.

[gilesht 3 Likes (Newbie)]

Oh that is so cool.

Thank you for all your help 

Really appreciate it