CODEWITHSUNDEEP
javascriptsvgsvg-animate
Sheixt
Sheixt

Reputation: 2626

What is the correct way to animate position using svg.js

I have created a path (which renders fine). After a few seconds I simply want this to move up vertically.

Following the documentation I have been able to animate the path, but it does not move as I expect it to. The path jumps to the right & moves diagonally opposed to a smooth vertical transition. Here is my code:

    hero = draw.path(pHero).center(310,200).animate(2000, '>', 1000).center(310,100);

Can anyone point out what is causing this?

I've outlined this in a JSFiddle as well: http://jsfiddle.net/Dwf3Z/

Upvotes: 1

Views: 291

Answers (1)

wout
wout

Reputation: 2567

Path's often have an offset themselves creating biassed translations. The easiest way out is to put the path in a group.

hero = draw.group()
hero.path(pHero)
hero.center(310,200).animate(2000, '>', 1000).center(310,100)

Here's the modified version of your fiddle: http://jsfiddle.net/Dwf3Z/1/

Upvotes: 1

Related Questions