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

Articles

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

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

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.

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 :)

Featured

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.

Inspiration

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

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

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

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

The old canvas go-to meets eyeballs 👀

Animation in the real world

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.