This week we're checking out some awesome (and useful) approaches for animating on scroll. From controlling amazing WebGL effects, to plugging into a handy JS script helper, and even discussing how we could approach a new CSS standard for scroll animations. As usual, lots of demos too. Enjoy!

♥️

Donovan at CSSAnimation.rocks

How to Create Smooth WebGL Transitions on Scroll using Phenomenon — tympanus.net

Combine scrolling with WebGL and you get some beautiful results! Check out this tutorial 🙌

lax

This super-tiny JS script lets you attach animations to scroll to create some lovely effects 🛹

Scroll-linked Animations

This proposal should be exciting for any of us building scroll-linked animations! It includes a proposed CSS-based approach and ideas for scroll based navigation shrinking, progress bars and more!

Jen Simmons: "How’d you like a way to do animations triggered by user’s scrolling — using CSS?" — twitter.com

Jen Simmons asks - would you use this CSS-based scroll approach? Let her know what you think in this Twitter thread ✨

Featured

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

A quick question - have you tried and did you enjoy this course? If you did (or even didn't enjoy it), feel free to tweet me your thoughts! I'm really keen to understand how people got on with it 🤔

Inspiration

WebGL Wonderland

Loads of awesome examples of WebGL animations, creating using Phenomenon (do do de do do)

Pure CSS Parallax Scrolling — codepen.io

As the title says - pure CSS parallax scrolling. Use wisely!

Screen background scrolling — codepen.io

A little illustrative example of scrolling content within a Div

Image Accordions — codepen.io

A beautiful accordion hover effect