# Animation

There are many options to animate the SVG content:

  • .animateTo(): we must use as first option the very powerful .animateTo() method. It works internally with CSS and SMIL, with a straightforward interface.

  • CSS: when the SVG attribute has an equivalent CSS property we can use the CSS animations.

  • Web Animation API: we can use .animate() and related methods that exposes a Javascript API for CSS animations.

  • SMIL: we can use the SMIL (Synchronized Multimedia Integration Language) animations by the SVG elements animate, animateTransform and animateMotion.

  • window.requestAnimationFrame(): we can use Javascript and this method for complete custom animation.

# .animateTo()

It is a powerful and straightforward way of progressively changing a series of attributes from its initial value to a target value.

Internally, it works primarily with CSS, and alternatively with SMIL when the animation is not supported by CSS.

The .animateTo() API is very similar to the Web Animation API .animate(), but with some minor differences:

  • .animate() and .animateTo() accept this common format: [{prop1: val1, prop2: val1}, {prop1: val2, prop2: val2}, {prop1: val3, prop2: val3}]]`.
  • .animate() accepts also this format: {prop1: [val1, val2, val3], prop2: [val1, val2, val3]} which is not supported by .animateTo().

The .animateTo() transform the SMIL syntax to the CSS syntax, for example:

  • transform: 'rotate(315, 50, 50)' is converted to transform: 'translate(50,50) rotate(315) translate(-50,-50)'
  • d: 'M0,0L100,100' is converted to d: 'path("M0,0L100,100")'

The .animateTo() accept nested object, you can write: {transform: 'translate(80, 80)'} or {transform: {translate: [80, 80]}}.

When .animateTo() finishes, the values are passed to SVG attributes or CSS properties, so that we can easily manage the state of the element.

# simple use

The simplest form to user .animateTo() is passing an object with keys and the target values as a first parameter.

Optionally, we can include a transition time in milliseconds as a second parameter. By default, the animation duration is 200 milliseconds. If you pass a time value 0, the change is executed immediately, and the animation is not displayed.

This is a complete example:

    # steps and options

    If we want to define several intermediate steps within an animation, we can pass an array of objects with each step we want the animation to perform.

    Additionally, we can include an offset key with values between 0 and 1 to indicate when we want each step to be set.

      # callback for start and end animation

      If we need to capture the moment when the animation starts and/or ends, we can pass two additional parameters with callbacks, the first one is called when the animation is ready and starts, the second one is called when the animation finishes.

        # to prevent animation when the system is configured to prevent animations

        When the operating system is configured not to perform animations, the .animateTo() method detects this and respects the user's settings, changing the values immediately and avoiding showing transitions or animations.

        # CSS animation

        CSS animations allow you to animate an SVG with transitions from one CSS style setting to another.

        CSS animations have two components, a style that describes the CSS animation and a set of keyframes that indicate the start and end values, as well as possible intermediate points.

        We can add or remove the animation with .classList object.

          See: MDN (opens new window)

          # Limitations

          CSS animation may not be applied on attributes that do not have an equivalent CSS property, among others, these common SVG attributes:

          attribute element
          dx text
          dy text
          fr radialGradient
          fx radialGradient
          fy radialGradient
          points polyline and polygon
          x1 line
          x2 line
          y1 line
          y2 line

          If you need to animate any of these attributes, use .animateTo() or SMIL animations.

          # Web Animation API

          Related with CSS animation, we can use the new Web Animation API, that expose a Javascript way for CSS animation. Specially straightforward is the .animate() method:

            See: MDN (opens new window)

            # Limitations

            The Web Animation API is an imperative mode for CSS animation, and as a result, it cannot animate SVG attributes not supported by CSS animations.

            If you need to animate any of these attributes, use .animateTo() with a programming interface very similar to animate(), but with support for those attributes.

            # SMIL


            On the Internet we can find documents indicating that SMIL is deprecated. The Chrome team announced this deprecation, but finally backed down. SMIL IS NOT DEPRECATED and some animations are only possible by this way.

            # 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 .fill() defines if the attribute keep the target value after the animation run.

            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.

            For control about when the animation is running, we can configure the animate element .begin('indefinite') and call to .beginElement() for execute the animation.

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

                # animate points

                With animate element we can animate points of polylinee or poligon elements. This kind of animation is not possible with CSS or Web Animation API:

                  # Limitations

                  The animate element cannot animate CSS property without SVG attribute equivalence, especially important are CSS properties related to text styling such as text-decoration-color, text-decoration-thickness, text-emphasis, text-emphasis-color, text-indent, text-shadow, text-underline-offset.

                  If you need to animate any of these properties, use .animateTo(), CSS animations or Web Animation API.

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

                      # requestAnimationFrame()

                      We can use Javascript and the method requestAnimationFrame() for complete custom animation.