# Animation

There are many options to animate the content of an SVG. We can use the SMIL animations as SVG elements; we can use the CSS animations, and -of course- we can use Javascript and the method requestAnimationFrame() for complete custom animation. Let's give them a brush-up to SMIL animations into the SVG context:

# .animateTo()

This method provides an abbreviated way of changing a series of attributes progressively from its initial value to a target value. When the animation ends, the attributes have the target value permanently. It works like this:

element.animateTo(obj [,duration] [,star] [,end])

As a first parameter, we receive an object with the attributes as keys, and the target values. Optionally we can include a transition time in milliseconds.

This is a complete example:

If you pass a time value 0, the change is executed immediately, and is not displayed the animation.

This method accept two optional parameters:

  • start - a callback function called when the animation is initialized.
  • end - a callback function called when the animation is finished.

# animate element

We can add with .add('animate') an element that provides a way to animate an element's attribute. Usually, the animate is created nested to the element to which the animation is applied.

With the method .attributeName(), we define the attribute to animate; the methods .from() and .to() must be used for defining the initial and finish values of this attribute. .dur() defines the animation duration ('1s' or '1000ms' are valid values) and .repeatCount() defines the number of animation or if this is 'indefinite:

With .values() and .keyTimes() you can define with more precision the animation, establishing the values that the property has to have in each moment.

Other important method is .fill(). In this case, it defines the final state of the animation. If the value is 'freeze', the state of the last animation frame is kept, but by default is 'remove ', and as a result, after the last animation frame, the attribute value returns to the first.

If you add an animation after creating the SVG, it is essential to remember that it is necessary to call to .beginElement() method to start the animation. If this is not done, the effect can be quite inappropriate.

# animateTransform element

With .add('animateTransform'), we can animate an element with a transformation. Usually, the animateTransform is created nested to the element to which the animation is applied.

In this case, method .attributeName() must be called with 'transform' value, and the methods .from() and .to() can be used for defining the initial and finish transformation values or use .values() to determine the values into elapse animation time. As in other cases, .dur() defines the animation duration, and .repeatCount() establishes the number of animation, or if this is 'indefinite. If you need to add more than one animationTransform, you need to call .additional('sum').

# animateMotion element

.add('animateMotion') create an element can animate the movement of a shape along a motion path. You can define the path directly on this element (.path()) or reuse a previous path with animateMotion.add('mpath').href().

A handy attribute is .rotate(), then define the shape orientation into the motion. It can be a number, 'auto', or 'auto-reverse'. As in other animations, you can use .dur(), .repeatCount() and other method to config the behavior.