CODEWITHSUNDEEP
javascriptanimationdictionarysvg
tony3243
tony3243

Reputation: 33

Svg animation-object follow path

I am trying to make an object( a circle) to follow an svg path (i did this with success) but I want this object to minimize when it reaches some coords and then resize to his radius again automaticly and do it over and over. How can I do this?

Upvotes: 0

Views: 428

Answers (1)

Joe
Joe

Reputation: 170

If you're open to using a library, use Greensock and the morphSVG plugin to do this. They make it easy to animate elements along a path. You can feed it path data from an existing path using the pathDataToBezier method and then animate any object along that path. It even has the ability to auto rotate based on its current direction.

You will need TweenMax or TweenLite, which is the basic tweening library, and then the morphSVG plugin to get the job done. You'll probably want a few others, too, like DrawSVG and the Attr plugin.

It also has every manner of triggered events such as onUpdate, onStart, and onComplete, so it's very easy to tween whenever and however you want.

http://codepen.io/anon/pen/VerMWX
http://greensock.com/forums/topic/13581-animate-svg-object-along-motion-path/

Upvotes: 1

Related Questions