- CSS Animation Weekly
- Posts
- CSS Animation Weekly #50 - Animating modals, logo animation concepts and animated icons
CSS Animation Weekly #50 - Animating modals, logo animation concepts and animated icons
This week we're animating modals along paths, exploring beautiful logo animation concepts and grabbing some free animated icons!
♥️
Donovan at CSSAnimation.rocks
Chris Coyier shows us how to make use of the new "offset-path" to animate a modal window
A stunning series of logo animations created by Motion Design School students 🎬
Free collection of animated icons for web - make your users go "Ha!" 🌟
Inspiration
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/9a4bc280-a666-4d9f-9b75-5c9ff57b7f78/large.png)
Lovely demo of various animal SVG animations 🦁
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/2e6c5cfb-9cd0-41f8-bf9a-3290bcadf1e7/large.png)
Interesting idea - each state of the UI elements has a different CSS water-themed animation 💦
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/63632528-8ff3-43f0-98f1-e75dc93bbdf1/large.png)
Wow - a deceptively simple yet mind-bending CSS spinner effect 💈
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/0c7dbf0e-04aa-4f88-93cf-fc18b0bc6e47/thumbnail.large.jpg)
Forget spheres and trances, check out these animated CSS pentagons ⬟
A CSS-only demo that simulates picking books off a shelf and previewing a page (on hover) in first-person 📚
Animation in the real world
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/54c58bed-570f-4a39-b9e9-541906a156ce/facebook.jpg)
Fantastic use of scroll animations and humour on this portfolio site from Tim Roussilhe 🙌