The idea here is use an SVG icon in a button and swap that icon out for another when the button is clicked. A button click often suggests an action has been taken, so switching icons can be a nice UI touch to show the change in context and confirm that the action has happened.
A possible use case could be a download button. The icon in the button might initially indicate that the button will trigger a download but change to a checkmark when the button has been clicked.
To no one's surprise, I'm sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let's look at some of the options (with demos) and weigh the advantages and disadvantages.
I took a class at Bay View Printing Company, the local community letterpress shop I belong to, all about printing with polymer plates. The shop is absolutely full with wood and metal type, and all the accoutrements around that, but polymer plates are not that. You get them made! They can be anything! Sometimes it's fun to stick with the old school setting of type. I like doing that quite a bit. But I was interested in learning how to letterpress with designs I made in a modern way. Like, with SVG.
The question I am asked most frequently: what animation tool do you recommend?
Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job.
If you’re here for React, we’ve got you covered! Jump down to the React section below and we’ll break down what to use and how to use it.
Beyond that, you can control what they call the
shapeIndex, which controls which point on the previous shape moves to which point on the new shape, which has drastic impact on the way the animation plays out, so you can make it smooth and intuitive rather than awkward and forced. Not to mention that can convert your typically-non-morphable shapes into a morphable shape for you.
They have a collection of examples to check out. You have to be a member of Club GreenSock to use it in production, but you can play with it for free on CodePen. I have a simple template to get you started.
Have you ever had a day at work where you were constantly put towards a new task as you were ramping up on the current one? It feels jarring at best, and completely frustrating and time-wasting at worst. In recent years, employers at big companies have begun to consider the cost of context-shifting—the time spent re-adjusting your brain to a different task adds up, causes frustration in employees, and thus: loses money. It follows that User Experience on a website works the same way.
While animating SVG with CSS is easy and comfortable, CSS can't animate all the SVG properties that are possible to animate. For instance, all the properties that define the actual shape of the elements aren't possible to change or animate in CSS. You can animate them through SMIL though. Sara Soueidan covers this in her guide to SMIL here on CSS-Tricks, but I thought I would shine a light on this particular ability.
Even though animating SVG with CSS might be more comfortable for the average front-end person, SVG has another way do animation built right into the SVG syntax itself. This is exactly what we cover in brief in this video, but if you want a complete reference guide definitely check out A Guide to SVG Animations (SMIL) by Sara Soueidan right here on CSS-Tricks.
SMIL stands for Synchronized Multimedia Integration Language. As I understand it, that is a "thing" all unto itself that happens to be built into SVG. But SVG has some of its own SMIL-like additions. I'll just refer to it all as SMIL even though I'm sure I'm technically incorrect sometimes.
The following is a guest post by Sara Soueidan. Sara has a knack for digging deep into web features and explaining the heck out of them for the rest of us. Here she digs into SMIL (and friends), and animation syntax built right into SVG, and gives us this epic guide.