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 …
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 …
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 …
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, …
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 …
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 …
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 …
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 …
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 …
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 …
