This week we're learning how to animate clipped shapes, animated SVG shapes using vanilla JS and experimenting with cool product page transitions, along with some awesome inspiration!

♥️

Donovan at CSSAnimation.rocks

Articles

Animating Clipped Shapes

I adore this approach to animating clipped shapes using SVG and anime JS. Check out the demo in Chrome.

Creating a Star to Heart Animation with SVG and Vanilla JavaScript

Ana Tudor shows us how to animate between SVG shapes using vanilla JS!

Expanding Grid Item Animation — tympanus.net

A grid item animation where the thumbnail scales up when the details view is opened.

Inspiration

Image Triangulation Demo

Watch as these triangles gradually resolve themselves into a face

Kylo Ren CSS Page Preloader — tympanus.net

A Star Wars Kylo Ren page preloader made with HTML and CSS only!

Polywalls — codepen.io

Move your mouse to see all these panels adjust and animate - could be a useful technique!

CodePen - Codevember #9 (French Fries) — codepen.io

Fries! (Best seen in Chrome)

Animation in the real world

The Tech That Took Down A Titan — www.wired.com

Learn about the tech that was used to locate the infamous drug kindpin Pablo Escobar - along with cool CSS glitch effects, scroll animations and more.