This week we explore ways to bounce an element around, pong-style, using CSS, create some staggering animations in a real-world example tutorial, and delve into the "prefers-reduced-motion" property.

♥️ Donovan at CSSAnimation.rocks

Articles

Bounce Element Around Viewport in CSS — css-tricks.com

See how you can create that Pong-like effect using CSS!

Animating text like Sketch does using only CSS — medium.com

Applying delays to animations can produce staggering results! Here's a recreation of the Sketch homepage

Exploring prefers-reduced-motion — www.phpied.com

While we love using animation we need to be aware that not everyone enjoys them the same way. Introducing "prefers-reduced-motion" - a way for users to signal that they prefer less animation by way of CSS media query. Learn how to best use it.

Inspiration

Good Fast Cheap

A lovely implementation of the old 3-choices when it comes to building anything

iCraft

A (basic but still awesome) re-creation of the original minecraft building-block interaction, in JavaScript!

Catapult volume control

Unique way to set volume! Press and hold the icon to adjust the launch angle

Animated Verbs

Nice use of the Splitting JS package to animate the letters in this animated verb

📊 Budging Bar

This animated line bars interaction from the @keyframers is a great example of how CSS can handle hover and click effects in quite a tricky layout

[Pure CSS] Light it up!

Always amazes me how CSS can be so interactive. This demo makes use of Pug to generate the HTML, and CSS animates the on / off state of a load of dots in this light-it-up game

That's all for this week! Please remember to help support this newsletter by either passing it along to friends, or if you like you can even become a patron here and help me pay the newsletter hosting bills! Many thanks, Donovan