CODEWITHSUNDEEP
javascripthtmlraphael
supersize
supersize

Reputation: 14783

animate width of rectangle from center in raphael.js

I have a question about the .animate() Api in Raphael.js There is a rectangle which I would like animate the width and height.

r.animate({ width: 50, height: 50 }, 1000, "bounce");

But I want to expand it from the center of that rectangle, not the left-top. Does anyone of you know how to do it?

FIDDLE

Upvotes: 1

Views: 1316

Answers (2)

Brian
Brian

Reputation: 5028

There is a better way to do this without calculation. If you know how much bigger you want to make your object, then you should animate the scaling.

Here is the DEMO

r.click(function() { r.animate({ transform:'s2' }, 500); });

Note that transform:'s2' means scale it 2x. Hope this helped ;)

EDIT if you want to have this animation works conterminously, just write transform:'...s2' instead.

Upvotes: 2

Claudio Holanda
Claudio Holanda

Reputation: 2566

You can use x and y to move the retangle and simulate it growing from center.

r.click(function() { r.animate({ width: 100, height: 100, x: 75, y:75 }, 500); });

Here is a FIDDLE

Upvotes: 1

Related Questions