Jump to content
Search Community

Basic Stroke animation

gilesht 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

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

 

VaMkTmA.jpg

 

KF2 : blue nodes back in original position

 

1g8TeCA.jpg

 

KF3 : nodes 5-7 displaced to create the following

 

M5k18Bl.jpg

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

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...