Hey there! This week we're building dynamic animated page headers, exploring complex animations using custom properties, and checking out my new project, GetStartedWith.dev!

♥️ Donovan at CSSAnimation.rocks

Articles

Building A Dynamic Header With Intersection Observer — www.smashingmagazine.com

A useful step-by-step guide to creating a fixed, animated header that responds to what is on the screen using intersection observer

Build Complex CSS Transitions using Custom Properties and cubic-bezier() — css-tricks.com

Use the @property feature to build complex animations using CSS

Featured

GetStartedWith.dev — getstartedwith.dev

Hello! Donovan here. If you're interested in modern web development, you should check out Get Started With.

In my first post we learn how to build a GraphQL API using JavaScript, and try out lots of queries. Check it out.

Get on the mailing list for updates on new posts!

Inspiration

Tokyo 2020 (CSS only)

A 3D recreation of the Tokyo 2020 wreath

Sass parallax example

It's cool to see parallax achieved in CSS

Poimandres

A pretty cool 3D Christmas-themed interactive background

SVG Background Image Animation

Trippy effect with these animated inline SVG backgrounds

CSS Pulse Example

A nice simple pulse effect for inspiration