In my previous article, I've shown how to smoothly transition from one state to another using vanilla JavaScript. Make sure you check that one out first because I'll be referencing some things I explained there in a lot of detail, like demos given as examples, formulas for various timing functions or how not to reverse the timing function when going back from the final state of a transition to the initial one.
#
By
Geoff Graham
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.
#
By
Chris Coyier
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.
#
By
Chris Coyier
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.
#
By
Sarah Drasner
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.
#
By
Chris Coyier
Greensock really knocked it out of the park with this one. You know shape morphing? It's a cool effect with loads of uses ranging from practical to artistic. SMIL can do it, but the future of that is in jeopardy. Other JavaScript libraries can do it, but they are bound by the same limitation as SMIL: they need to have the same number of points. This new Greensock plugin isn't bound by that, meaning you could morph an apple into the word apple (!).
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.
#
By
Sarah Drasner
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.
#
By
Chris Coyier
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.
Update: This post is all about SVG shape morphing with SMIL. SMIL has an uncertain (likely not good) future. If you're super interested in shape morphing (which you should be, it's awesome!) I recommend checking out GreenSock's MorphSVG plugin, which doesn't require SMIL and is far more powerful as it can morph between shapes regardless of number of points, type of element, and cross-browser.
Another update: Chrome has started to allow shape morphing through CSS. Here's a Pen that demonstrates that. It's even more limiting than SMIL though, being limited to the one browser and requiring a path with an identical number of points. Also not hardware accelerated, like all SVG.
#
By
Chris Coyier
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.
#
By
Sara Soueidan
Update December 2015: At the time of this update, SMIL seems to be kinda dying. Sarah Drasner has a guide on how you can replace some of it's features.
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.