CSS Animation Weekly
Posts
CSS Animation Weekly #65 - SVG Overlays, Game characters, Progress rings and more

CSS Animation Weekly #65 - SVG Overlays, Game characters, Progress rings and more

A massive week for front-end development and animation, and this issue is packed with articles and inspiration. Learn how to make amazing SVG page transitions, bring game characters to life and build progress rings.

♥️

Donovan at CSSAnimation.rocks

Articles

Dynamic Shape Overlays with SVG — tympanus.net

Another great tutorial from Codrops, this time creating amazing page transitions using SVG overlays

Bring your game characters to life with microtweens – Emanuele Feronato — www.emanueleferonato.com

A simple but effective approach to animating static assets

Building a Progress Ring, Quickly — css-tricks.com

Create an animated progress ring for when you need to let your visitors know everything's ok

Metaballs

Ever wonder how those gooey SVG effects work? Varun Vachhar delves into the maths on how they work

Inspiration

Geometrical Birds - slideshow — codepen.io

Gorgeous transitions on these SVG bird illustrations 🦉

Weather Application built with jQuery and Yahoo Weather API (4 color schemes) ⭐ — codepen.io

Lovely 3D transitions and panel movement on this working weather app demo ☀️

Halloween - Gooey-drips - JS generated version 5a (60fps) — codepen.io

Getting near Hallowe'en and the Codepens are getting creepy 🤢

Nature | SVG + CSS — codepen.io

Interesting text effect using SVG and CSS

CSS Loader — codepen.io

Simple CSS loader made with CSS3 animations and transforms

Animation in the real world

InVision Studio — www.invisionapp.com

As a designer / developer I'm crazy excited to see what this new release from Invision is going to be like (any chance of some early access? hint hint). Anyway, check out the scroll animations on this!