I was watching the video recording of the Bay Area CodePen Meetup and got curious of different animation techniques when I heard Sarah Drasner (@sarah_edo) talk about GSAP and SVG animations.

So I put togehter this little comparison where I create the same animation with different animation techniques. It's not comprehensive in any way, it's just for my own curiosity. Since the Pens belong together I thought a blog post was a good choice - much more fun than just a CodePen Collection.

CSS keyframe animation

Except for canvas, the only technique I already knew was CSS keyframe animation. By animating X and Y movement on a parent and a child element respectively, you can combine two different CSS animations. The bouncing is achieved by using animation-timing-function linear for X and ease-in for Y.

Web Animation API (JavaScript)

There is a W3 spec proposal for a JavaScript API for animations. Native support in the browser! Not finalized/official yet. Google and Firefox are on the train but neither IE nor Safari. There is a JavaScript polyfill but I would not like to use this for anything serious yet.

You call the animate() method on the HTML element you want to animate. Cool!

TweenMax (GSAP) (JavaScript)

GSAP stands for GreenSock Animation Platform and is a third party collection of JavaScript libraries developed by GreenSock. TweenMax is one of the core libraries. Since I am a coder/programmer I like their JavaScript approach to animations. Seems very capable and performant!

SVG Animation (SMIL)

W0T!? There are more ways to animate stuff?

I think there is a future in SVG because of the big variation in screensizes. Make it look good once and then make sure it scales properly is a nice solution. But for me personally, this technique feels the most awkward.

There is no "alternate" keywork to make the animation go back and forth, you have to manually set the starting point at the top, 50% at the bottom and then at 100% at the top again. And there is no easing keywords, you have to manually set easings with bezier curves (via keySplines and calcMode="spline")

All in all I had a great time experimenting with all this.

Update, June 4, Redshift (JavaScript)

Here is the animation done with Redshift, a third party JavaScript, Open Source, "UX Framework". Note: this Pen is a fork by Matt Perry, @SirHound.


I found these two CSS Tricks articles increadibly useful:

4,850 9 37