SVG animation

The Making of the CSS-Tricks Logo Easter Egg Animation

When Chris first started the CSS-Tricks redesign, he came to me with some screenshots of the direction it was headed in, and suggested that I make an animation for the logo as part of the design refresh. I was excited about this project, and my mind immediately started to shuffle through possible animation and interaction.

I’ve been working a ton with the GreenSock Animation Platform and SVG lately. If you are not aware of it, is worth checking out. It’s very good at performant animation, complex timelines, and cross-browser stability in animation, among other things.

(more…)

23: Animating SVG with SMIL

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.

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag