This week we're exploring how we can add scroll animation to projects, learning the basics of CSS animation, and as usual a wide range of fun demos and inspiration!

♥️

Donovan at CSSAnimation.rocks

Parallax scrolling with CSS variables | basicScroll — basicscroll.electerious.com

I'm looking forward to trying this out on a project! Attach animation easily to scroll position 😎

Learning CSS Animations with a touch of Javascript — codeburst.io

A nice introduction to using CSS for animation, with a little JavaScript too

Featured

Expert in CSS animation already? — courses.cssanimation.rocks

Maybe this course isn't for you! But if you know someone who could benefit from learning more about CSS animation, and building an animated landing page, they might want to know it's currently on sale for just $19!

Inspiration

Animated status indicator — codepen.io

Change the settings and see this worm change animations 🐛

CSS Puns — saijogeorge.com

Some classic CSS puns realised through CSS animation 🚢

Lyrics Player — codepen.io

Awesome proof of concept of a lyric display that highlights the current line - with CSS animation!

Svg checkmark drawing — codepen.io

Cool line-drawing SVG effect (press the button)

Spinner

Mesmerising spinner that transforms from a square into circle 🌀

Alien with googly eyes — codepen.io

Blerp! It's a cute googly eyed alien 👽

Would you like fries with that? — codepen.io

Build a burger!

Jelly Mario by @schteppe

A truly bizarre reinterpretation of the original Mario brothers SNES game