- CSS Animation Weekly
- Posts
- CSS Animation Weekly #211
CSS Animation Weekly #211
The week we look to Canvas and learn how to simulate collisions!
♥️ Donovan at CSSAnimation.rocks
Articles
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/015b74c1-0220-4f75-8021-905040a907a4/colliding-balls.png)
A fun article on creating realistic looking bouncing objects in Canvas
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/2f99abd1-da7c-4477-ba19-0adb4d8e0672/UI9.jpg)
A round up of some cool animated UI interactions from Codrops
Inspiration
Click the heart a few times to see it fill up with some lovely smooth animation
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/de8ef608-0e9c-474d-95fa-892c1b92515c/Buttons_featured.png)
Some examples of magnetic-feeling buttons
The gradient border on this button is neat
Cool example of a static background image when transitioning between sign up and sign in
An interesting take on the old Breakout game
A nice CSS-only implementation of the submit / loading / success animation
Some inspiring "gooey" loader effects here
Animation in the real world
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/d5609d0f-2c0c-473d-919f-1552467f7429/3295d7ab-8f18-410a-b886-5d21b9f173c1_share.jpg)
Interesting experimental navigation approach - turn an ephemeral cube to bounce between case studies!