I hope everyone's having a great week! This issue we look at how we can build complex animations into React (as well as creating the same effect *without* React) - and taking inspiration from responsive buildings, checkboxes and more.

♥️

Donovan at CSSAnimation.rocks

Articles

Building a Complex UI Animation in React, Simply

If you've used React for projects you may have discovered how tricky it can be to apply animation to elements, especially if it involves manipulating DOM contents. This article sets out a nice approach while recreating the Stripe animated menu.

Stripe.com Navigation in CSS and jQuery — codyhouse.co

Want to recreate that Stripe menu without React? This article is all about that lovely menu effect!

Featured

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

Learn how to bring a website to life, animations, transitions, scroll effects, carousels and more in video tutorials.

Inspiration

Responsive CSS only Building — codepen.io

Resize to have this lovely building adjust orientation to fit your window 🏠

Chromatic Slider 🌈 — codepen.io

I love this effect - dragging the slider reveals layers of colours beneath. Can be a little harsh on the eyes but it looks amazing 🤩

3D toggle - click it! — codepen.io

3D-style checkbox! Best seen in Chrome

welcome to the dark side... we have kitties! — codepen.io

Moar animated checkboxes - with a dark theme

Snap of the Fingers — codepen.io

Deconstruct a Jonathan Snook by clicking the little image on the top left

Tweet Sending Morph Animation — codepen.io

A post-tweet concept where the textarea morphs into the Twitter bird and flies away.

Celebrating 1,000!

Well done to @Keyframers for their recent milestone, 1000 Twitter and Youtube followers 🎉

Animation in the real world

Epicurrence — Summer Revival — www.epicurrence.com

This looks like an amazing non-conference get together! I'd love to go. In the meantime, I'm enjoying the lovely parallax scrolling effects and interactions 🎉