A huge week to finish up January, 2017. This week we're learning the magic of WebSockets with CSS animation, controlling our animations play states, surveying the wide world of web animation and as ever, loads of inspiration.

♥️

Donovan at CSSAnimation.rocks

Articles

Making Magic with WebSockets and CSS — medium.com

WebSockets and CSS are sufficiently advanced technologies that can seem like magic. In this article learn how to combine animation with real-time web communication to great effect.

Ensuring CSS Animations Run and Stop Gracefully — www.viget.com

A clever approach to having our animations stop more gracefully - letting them play out and be timed properly with loading content.

CSS Animation for Beginners

A wonderful introduction to the world of CSS animation by Rachel Cope. 

Web Animation — A comprehensive overview — medium.com

Got the basics of CSS animation covered? Eve Weinberg takes us on a deep dive of web animation technologies.

A note to my awesome readers

Running this newsletter costs around $100 per month. A while back I tried some advertising and while it worked, the idea of letting someone pay for links feel right. You've trusted me with your email address, and sending adverts your way seemed wrong.

With that in mind I'm trying something new! I'm set up a Patreon page.

Here's how it works: Lovely readers like yourself donate a small amount each month. You can choose how much you want to pledge, but it starts at just $1 per month. In return I produce this newsletter as well as continue creating and sharing tutorials.

As a special bonus, you'll get discounts and early access to new content.

Don't worry, I'm going to keep producing it regardless of whether people pledge. But it would be awesome if you choose to. Check out the CSSAnimation Patreon page.

Many thanks, Donovan

Inspiration

CodePen - Animated feelings

Very cute animation showing how the balance of chemicals in our brains results in different emotions 😂 😔 🙄

WebGL Rainbow Sprinkles

There are so many Canvas effects around but this one is "particularly" nice, with the 3D effect 🌈

CodePen - Noodlin'

A nice loading effect with overlapping circles 🌀

Alpaca Peck 💋

These two young alpacas are in love. Can you help them make a connection? 

Fancy box hover effect

Really neat hover effect where the icons expand to become the content.

Magritte Skates on Thin Air

Lovely storytelling here using CSS animated art. Great work from D.B. Johnson.

Till next time...

Thanks for reading! Do check out my Patreon page to see what  rewards you could get for supporting CSSAnimation.rocks!