As of lately, my interests in terms of Web development have gone from a devotion to responsive design techniques to the appreciation of finely, well-made animations and interactions. Today I’d like to share a project called “Transformicons” that’s inspired by the work of Bennett Feely and Sara Soueidan.

How It Started

As a child I really liked the series Transformers -specifically the version from the mid-80’s. When I initially saw the post from Sarah I immediately thought about the transformers and their ability to morph into other objects just as Sarah had discussed. This not only inspired my soul, but provided a fresh mission for creating for a new Open Source project (especially one that would keep my attention). All that was left to do was make a repo, find some developers willing to help and get to work. Luckily some really helpful developers jumped in.

How It Works and Purpose

Essentially the idea is this; take the work already started and package it up into an easy to use build system so developers walk away with only the essential code required for their desired symbol/button/icon. This was the beginning spark for the builder where authors can choose objects at will and output the necessary markup with the option for Sass or CSS and finally minified or unminified JavaScript (required for the objects to morph).

Examples of icon morphing provided by Transformicons


The entire project is licensed under MIT in order to adopt a wider participation from the community. I hope in the coming months and even years this project grows into something really valuable that stands the test of time. Morphing objects are a great way to give users feedback instantly when an action takes place and can even lend a hand in terms of directing someone onto the next task. If you like interaction and animations for interfaces then this is certainly the right Open Source gig for you. The project can always benefit from the entire community helping in regards to performance, unit testing, expanding the library itself and even bug hunting. Help us, help you on GitHub.


Web Development & Design, Technical Writing, Interaction Design, Open Source Maker & Contributor. Helping Create A Better Web.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview: