The newsletter has been running without missing a single week for 3 years! Many thanks to you all for being a part of this journey.

This week we're delving into how animation can make our products stand out, adding some lovely parallax-style image scroll animations, and improving our forms!

♥️ Donovan at CSSAnimation.rocks

Articles

“Building More Expressive Products” by Val Head — www.youtube.com

Check out this Event Apart video where Val Head helps us build better, more expressive products using animation

How to Add Smooth Scrolling with Inner Image Animations to a Web Page — tympanus.net

How to create a cool scroll-effect with images that seem to have their own deeper layer animating on scroll

Avoid Placeholder Text by Animating Form Labels — knowbility.org

Good idea this - avoid abusing the "placeholder" property (it's too-often used as a label when it shouldn't be) with animated form labels

Framer Motion — www.framer.com

This looks like a very handy tool for producing production-ready animated UI in React

Featured

CSSAnimation.rocks is creating a weekly newsletter — www.patreon.com

Support this newsletter from as little as $1 per month! ☕️

I've been building this newsletter for 3 years now and while I do love it, it takes a significant amount of time each week. Please considering contributing!

Inspiration

3D Particle Tornado

We all love particles, and tornadoes are pretty awesome too. So why not both!?

Multiple Sections Animated Text on Scroll

Neat example of staggered text animations on scroll

Stopwatch icon

A nicely timed little stopwatch animation ⏰

Tab bar active animation #2

A slick little animation on this nav bar with SVG icons

pimm’s 🥃

Add a slice of cucumber to this lovely CSS-build drink