- CSS Animation Weekly
- Posts
- CSS Animation Weekly #102
CSS Animation Weekly #102
This week we're learning how to make some amazing canvas-based parallax animations, and discovering a load of amazing animated clocks - along with the usual inspiration!
♥️
Donovan at CSSAnimation.rocks
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/43be738a-93c2-49f6-9c35-74699c9ae85d/hex-bokeh.png)
Learn how to create an amazing physics-based scroll background animation using Matter.js. This tutorial includes lots of cool examples ✨
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/0d05aac7-9a23-4732-bdef-900cca4ea904/forkme_right_orange_ff7600.png)
Looking for inspiring animated clocks? Look no further. A great collection of animated clocks.
Featured
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/f0ae218f-51f5-43f3-acf6-e77fadd096ac/rObmmDOxSYmssAWgAL3a.png)
Learn how to bring a website to life, animations, transitions, scroll effects, carousels and more in video tutorials.
Inspiration
Speaking of clocks - here's a tutorial on how to build your own using JavaScript and animated using CSS! 🕰
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/87ec7dce-cae2-4e11-a851-6eeb0d4326b9/large.png)
I'm a huge fan of SVG line animation, and also a huge fan of animated loaders. Why not both? 😋
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c2159c79-f598-49c7-aaa5-9f40cff9d5da/large.png)
Lovely subtitle animation on this flying birdy
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/43a0ba79-de64-4c24-b4e1-923fc928791f/large.png)
Busted! Nice use of SVG animation on this rap sheet of the great musician
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/db5892c0-d3ff-4b66-8b85-60f858283f24/large.png)
An interesting take on the old "Page Not Found" thing - with a word search
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6b3435aa-5926-4d87-bd9b-5a8316e78736/large.png)
Speaking of searching, click the icon to see it transform into a search box! Nifty
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/954b8a6d-3a3f-40df-8520-98815e4fa20e/large.png)
Hover over this whale to cast an x-ray through it