This week we're starting to get spooky with the Halloween themed inspiration! Also, take a moment to learn how motion creates emotion, create meaningful micro-interactions, and create your own Banksy!

♥️

Donovan at CSSAnimation.rocks

Articles

When Motion Creates Emotion

A great article on when motion should be considered as part of the design process, and how to do it effectively.

How to Recreate the Banksy Artwork Shredder Using CSS Grid — medium.com

On Friday, Banksy pranked the world again by shredding “Girl With Balloon” immediately after it fetched $1.4 million in auction. This tutorial shows how you can do it too, using CSS!

Creating meaningful micro-interactions

Lots of animation to see here in this article on how to create meaningful interactions in your web projects.

Featured

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

Ever wanted to bring animation to your projects but wondered where to start? This practical video course guides you through with real-life examples and loads of ways animation can help your work.

Inspiration

Happy Halloween

Oh it's beginning to feel a lot like... Halloween! 🎃

Pure CSS ghost bustin' game — codepen.io

Try your hand at some ghost bustin' in this awesome little HTML/CSS game 🔨

Interactive Spooky Login Form — codepen.io

A ghost brings charm to this login form 👻

CSS-Only Parallax Effect — codepen.io

A nice example of how CSS css create a parallax-style effect on scroll

SCSS Animation Timeline Mixins — codepen.io

Possibly useful - check out how these timeline mixing remove the need to use percentages in our keyframes

Continuous animation with GSAP — codepen.io

Lovely smooth animation on this GSAP demo

Happy Birthday! — codepen.io

A classy bit of birthday animation! 🎂

Animation in the real world

Clément Vion - Freelance developer

All kinds of animation bring this freelance developer's site to life - parallax, hover effects, 3D movement, and lovely page transitions ✨