CSS Animation Weekly #32 — SVG strokes, Kute.js Easings, Designer Report

This week we’re fixing our SVG stroke animations, looking into the new animation framework Kute.js, as well as bookmarking the ever handy Easings.net, and finding loads of inspiration.


Donovan at CSSAnimation.rocks


Compound path 1

Three Illustrator tricks for better SVG stroke animations — valhead.com

Val Head shows how to make our SVG stroke animations stand out with these three handy tips.

Icon.html css

Fun Web Animation Effects with KUTE.js — www.sitepoint.com

Maria Antonietta Perna introduces KUTE.js, a versatile and powerful JavaScript animation library.

Apple touch icon

Easing Functions Cheat Sheet — easings.net

For lent I’m giving up using “ease-out” on everything. Thankfully Easings.net makes it easier to find more interesting and custom timing functions.

Report og image fb

Avocode 2016 Web Design Report — avocode.com

Have you moved on from Photoshop and Illustrator? See how designers responded in this survey report. Also, check out the lovely SVG animations on each one :)



Level Up your CSS animation skills — courses.cssanimation.rocks

This is a special update just for you, CSS Animation Weekly subscriber. Be among the first to enrol and save $140.

Learn how you can make your website stand out from the crowd using animation. In this video course you’ll be guided step by step through the process of building and animating a complete product landing page.

With downloadable code you can use on your projects, cheatsheets and loads of tips and advice, you’ll be able to build your web projects with animation in mind.

The course is launching very soon! Be a Pre-launch supporter and secure your place at the special price.



CodePen — Tito Loading image — codepen.io

An animated loading image for Tito, using SVG and CSS.

CodePen — RemindMe App Concept


Subtle wave effect really brings this water-reminder concept to life 🌊

Text Rotater


A handy example of text rotating upward to reveal the next line.

Pure CSS animation demo


Lovely use of colour on this loading demo — and it uses Sass so you can tweak the values and see what happens.

Bouncy Eye Balls


The old canvas go-to meets eyeballs 👀

Animation in the real world

Home new 1b

TERRY DESIGN — terrydesign.co.uk

Lovely parallax and subtle details in this new Terry Design site.

That’s it for this week! Don’t forget to enrol in the new CSS Animation course for the special pre-launch price.