Oct 23, 2017

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

By CSSAnimation.rocks • Issue #65 • View online

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

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

tympanus.net • Share

Bring your game characters to life with microtweens – Emanuele Feronato

A simple but effective approach to animating static assets

www.emanueleferonato.com • Share

Building a Progress Ring, Quickly

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

css-tricks.com • Share

Metaballs

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

varun.ca • Share

Inspiration

Geometrical Birds - slideshow

Gorgeous transitions on these SVG bird illustrations 🦉

codepen.io • Share

Weather Application built with jQuery and Yahoo Weather API (4 color schemes) ⭐

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

codepen.io • Share

Halloween - Gooey-drips - JS generated version 5a (60fps)

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

codepen.io • Share

Nature | SVG + CSS

Interesting text effect using SVG and CSS

codepen.io • Share

CSS Loader

Simple CSS loader made with CSS3 animations and transforms

codepen.io • Share

Animation in the real world

InVision Studio

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!

www.invisionapp.com • Share

Did you enjoy this issue?

By CSSAnimation.rocks

CSS Animation Weekly is a roundup of all the latest CSS animation articles and inspiration. Subscribe now and never miss an issue.

Tweet

Share

If you don't want these updates anymore, please unsubscribe here.

If you were forwarded this newsletter and you like it, you can subscribe here.