Skip to main content
CSS is fun and cool and I like it.
Article

Writing Smarter Animation Code

If you've ever coded an animation that's longer than 10 seconds with dozens or even hundreds of choreographed elements, you know how challenging it can be to avoid the dreaded "wall of code". Worse yet, editing an animation that was built by someone else (or even yourself 2 months ago) can be nightmarish.

In these videos, I'll show you the techniques that the pros use keep their code clean, manageable, and easy to revise. Scripted animation provides you the opportunity … Read article

Article

Using GSAP to Animate Game UI with Canvas

The year was 1995; Toy Story hit the theaters, kids were obsessively collecting little cardboard circles and Kiss From a Rose was being badly sung by everyone. I was a gangly ten-year-old, and like any other relatively tall kid I was often addressed to by "you must be so good at basketball!". So I practiced and practiced spending hours on the court of my elementary school. Eventually, I realized, much to the dismay of aunts and other cheek-pinchers alike, that … Read article

Article

A Comparison of Animation Technologies

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 … Read article

Article

SMIL is dead! Long live SMIL! A Guide to Alternatives to SMIL Features

SMIL, SVG’s native animation specification, has been highly regarded because it offers so many bells and whistles for performant SVG animation rendering. Unfortunately, support for SMIL is waning in WebKit, and has never (nor will likely ever) exist for Microsoft’s IE or Edge browsers. Have no fear! We’ve got you covered. This article explores some of those SMIL-specific features and delves into the alternatives to achieve the same effects with a longer tail of support.… Read article

Article

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 … Read article

Link

GreenSock MorphSVGPlugin

icon-link icon-logo-star icon-search icon-star