In this article, we’ll take a look at the code behind the animation: we are going to create an icon that, on click, switches from one state (in our example, a search icon) to another one (a close ‘X’ icon).

The tutorial

These are the steps we will follow to create our two-state icon:

1) Create an <svg> which includes both icon states (in our case, search and close); each state will be wrapped in a separate <g> element to preserve a logical separation;

2) On click, we will animate each group according to the selected state (making sure to update the aria-hidden attributes of the <g> elements as well).

Let’s start combining the two icons in a single <svg>; the icons I selected have the same width and height to ensure the transition between the two states works properly.

Open the first .svg file (the icon you want to be visible by default — in our case the search icon) in your text editor of choice, and wrap the content of that icon inside a g.js-transition-icon__state element:

Make sure the icon has a proper <title> tag for accessibility.

Then do the same for your second icon.

Now copy the content of your second icon (do not include the <svg> tag) and paste it in the first icon file, right below the <g> element; you’ll end up with something like this:

Insert the icon in your HTML file. You are ready to animate it!

In the above code, note that we added:

- the class ‘js-transition-icon’ to the <svg> element; this will be used in JavaScript to target all two-state icons in your page;

- ‘style=”display: none;”’ to the second <g> element (in our example, the close icon);

- ‘aria-hidden=”true”’ to the second <g> element (so that the icon is ignored by assistive technology).

We are now going to need a little bit of JavaScript to animate our icon.

First, let’s define a TransitionIcon object, and its init() method:

Here’s what the above JavaScript snippet does:

- For each .js-transition-icon element, we create a TransitionIcon object;

- The init() method takes care of listening to the click event on the .js-transition-icon element;

- When a click is detected, the triggerAnimation() method is used to animate the icon.

Here’s what the triggerAnimation method looks like:

Here’s the final result:

The Icon Transition Generator

Luckily, you don’t have to worry about manually creating those icons! The Icon Transition Generator does exactly what we’ve explained in the tutorial.

The tool provides also some options to customize the animation.

Precisely, you can:

- select the type of interaction (hover or click);

- select the kind of animation (scale or rotation).

The downloaded icon will be composed of visual elements (two <g> elements, one for each icon state), and a <script> tag that includes the JavaScript code for the animation.

If you plan on including multiple two-state icons in your project, then make sure to remove the <script> tag from the <svg> and add it to your .js file so that you do not duplicate this code (the content of the <script> tag has to be included only once and it is going to work for all your icons).

Finally, what best place to store your animated icons than our app? 😉