This week we explore how to build better experiences with our animations, make things move with canvas, and create a neat draggable slider. Oh and some 3D web experiences too!

♥️ Donovan at CSSAnimation.rocks

How Film School Helped Me Make Better User Experiences — css-tricks.com

Lots of great insight here into how we can make our web experiences more magical, including animation, storytelling and more

Making things move

Varun Vachhar shares some techniques (and excellent examples) on how to use canvas-sketch to create a mind-bending visual effect

Crafting a Scrollable and Draggable Parallax Slider — tympanus.net

A tutorial on how to build a slider with an interesting parallax effect that you can either scroll or drag through

Featured

Spline — spline.design

Create web-based 3D experiences with this new tool

Inspiration

Pure CSS Monument Valley II

Check out this scene from Monument Valley created using pure HTML/CSS!

CSS mouse-out transition effect

A handy little background transform

Training

Some cool CSS animations on these multi-coloured dots

Bread (Pure CSS)

A very cute pure CSS animation

Interactive Penrose Tiling

Lovely little demo where you can build your own tile effect

That's all for this week! Don't forget, if you have a project or product you'd like to see featured, get in touch. I have some slots available in the new year!