Animating SVG paths with .beginElement()

As part of a recent project I wanted to create an SVG navigation icon that animates with state changes on the parent element. In this instance from hamburger menu icon, to back arrow.

Basic States

Key to this technique working is using (and reusing) an equivalent set of instructions between states (in this instance our three straight lines).

Because of this idea of animating between like-for-like paths we must also use the full L syntax to draw the lines rather than the H shorthand and that we get the whole shebang drawn in a single path.

navicon-plan

Here are the Menu and Arrow paths. In both instances the path is structured as follows: [ move + line + move + line + move + line ]

//Menu
<path d="M10 10 L 90 10 M10 50 L 90 50 M10 90 L 90 90" />

//Arrow
<path d="M50 10 L 10 49 M90 50 L 10 50 M50 90 L 10 51" />

The SVG animate element

The SVG spec allows us to add limited keyframe (from, to) animations that target a specific attribute associated with a specific element. The animation definition sits inside the <path>  tags.

In this case we’ll be animating the path description. Twice! Here’s the first one:

<animate id="animate-to-arrow"
         attributeName="d"
         // from Menu path
         from="M10 10 L 90 10 M10 50 L 90 50 M10 90 L 90 90"
         // to Arrow path
         to="M50 10 L 10 49 M90 50 L 10 50 M50 90 L 10 51"
         dur="0.25s"
         begin="indefinite"
         fill="freeze"
/>

It’s pretty readable, but the important bits to notice here are the begin=”indefinite” which means the animation doesn’t fire immediately and fill=”freeze” which holds the final state.

Triggering an animation with beginElement();

Now we have the animation defined, we need it to run on demand. We do this by targeting the animate elements by ID and wrap them a function using the .beginElement() method.

iconToArrow = document.getElementById('animate-to-arrow');

function animateIconToArrow(){
  iconToArrow.beginElement();
}

Here’s a simple demo.