Welcome to CSS Animation Weekly number 195! This week we're exploring clip paths and motion paths, and working with GSAP for more efficient animation code! If you're working with colours, be sure to also check out our awesome sponsor, color.ninja.

Articles

Creating Morphing Animations with CSS clip-path — blog.bitsrc.io

Learn how to create CSS-animated clip path morphing using SVGs

Meanderer — github.com

A JavaScript micro-library for responsive CSS motion paths

Tips for Writing Animation Code Efficiently — css-tricks.com

Some great ideas for creating animations efficiently using GSAP

Featured

Color Ninja for Mac — www.color.ninja

Create perfectly matching designs with Color Ninja, the all-new and all-in-one color schemer for Mac. With every color scheme built-in, you’re sure to find the exact colors you need for an aesthetically pleasing design.

Inspiration

Bridging the SVG DOM for styling and animation

An example of how CSS variables can be used as a bridge for animating properties in SVG 🙌

The Mysterious Garden (Pure CSS)

Some cute pure-CSS Pokémon artwork

Bojack's face Animated /w GSAP

Move your mouse around to see Bojack respond

Pure CSS "Eye"

So much going on in this pure CSS sci-fi styled computer eye

Bouncing DVD logo — www.bouncingdvdlogo.com

Will it hit the corner!?

Animation in the real world

Gentle: A social app for compassion — gentle.app

This app seems very nice - I'm also a fan of the subtle use of animation on the landing page to give the content more character