This week we're learning how animation helps our web interfaces, experimenting with awesome letter effects, and being inspired, Canada style!

♥️

Donovan at CSSAnimation.rocks

Articles

Kirupa Chinnathambi — Animating the Web — goodstuff.fm

Listen to Microsoft's Kirupa Chinnathambi discuss how animations are made in today's user interfaces 🎧

Letter Effects and Interaction Ideas (Part 2) — tympanus.net

Learn how to create more fun letter hover/click effects with this article from Codrops. 

Inspiration

Canada 150 Fireworks — codepen.io

Lovely animated logo made for the 'Canada, Eh!' Creative Coding Club challenge 🇨🇦

Canada extrude — codepen.io

More Canada eh? 🇨🇦

CSS Dev Conf logo animation — codepen.io

A lovely bit of SVG animation to highlight the CSS Dev conference

Attract hover effect — codepen.io

A subtle effect in which the buttons cling to your mouse on hover! 

Simple fire animation — codepen.io

Good use of Sass generates a new set of flames each page refresh 🔥

Chrono Trigger Pendulum — codepen.io

A nice simple example of animation to recreate the motion of the pendulum from the game Chrono Trigger. 

Animation in the real world

#StopOverfishing — stopoverfishing.eu

Lovely animation defines this campaign to raise awareness of the problem of declining fish stocks. Add a fish! 🐟