This week, learn about CSS reflections with Ana Tudor, dive beneath the reflective surface with Mary Lou and optimise your SVGs with Sarah Drasner. Be inspired by some Olympic animation and TV show themed 404 page animations!
As always I love hearing your thought and ideas, and suggested links.
♥️
Donovan at CSSAnimation.rocks
Articles
The State of CSS Reflections
Ana Tudor explores the current state of reflections in the browser using CSS. If you haven't used box-reflect yet, check out this in-depth article on the subject.
Above & Beneath: Featured Content Layout Effect
Mary Lou presents a stunning set of ocean-themed landing page templates - a lovely combination of sounds and animations that bring you under the surface of the site.
High Performance SVGs
Working with CSS animation, we often need to create and optimise our SVGs. Sarah Drasner offers some useful advice on making SVG images load faster and perform better, as well as how to improve your workflow when working in teams.
Featured
animachine
A very early version of what could be a promising tool. Animachine is a GUI for GSAP. If you've used Flash or similar timeline-based tools before, this might be for you.
Inspiration
Rio 2016 Interactive Map
Fiasco Design has put together this interactive map for the Rio olympics. Lots of animations combine to bring it to life.
Strange Things themed 404 Page
Nice of us scaling on this 404, inspired by the Stranger Things TV show.
Animation in the wild
Humans & Machines
Video and loads of smooth animation makes the humans & machines website a joy to browse and explore. I love the emphasis of human faces and the simple, content-driven layouts.