A big week for animation! This week we're learning practical scroll-linked animations, taking them further with vertex transitions, and rounding it out with an amazing CSS-only clock.

♥️ Donovan at CSSAnimation.rocks

Articles

Practical Use Cases for Scroll-Linked Animations in CSS with Scroll Timelines — css-tricks.com

The Scroll-Linked Animations specification is an upcoming and experimental addition to CSS. Thanks to the @scroll-timeline at-rule and animation-timeline

Rock the Stage with a Smooth WebGL Shader Transformation on Scroll — tympanus.net

A handy setup to create a smooth scroll based GLSL animation using Three.js and GSAP that you can use to create your own WebGL shader animations.

Of Course We Can Make a CSS-Only Clock That Tells the Current Time! — css-tricks.com

Let’s build a fully functioning and settable “analog” clock with CSS custom properties and the calc() function. Then we’ll convert it into a “digital”

Featured

Get Started With GraphQL — getstartedwith.dev

Learn how to build a simple GraphQL API. This free, full tutorial will take from zero to "I got this"

Inspiration

Raymarching Experiment #1

Amazing example of in-browser ray-tracing

Checkbox-Counter

It's a small detail but I really like the animated SVG check marks on this demo

Vanishing Suzanne by Arno Di Nunzio — adinunz.io

A configurable animation that creates a burning effect like that seen in Loki