- CSS Animation Weekly
- Posts
- CSS Animation Weekly #316
CSS Animation Weekly #316
This week we're making mighty morphing 3D blobs, full-screen slideshows and some fun loading effects, along with loads of great CSS animation inspiration!
❤️ Donovan at CSSAnimation.rocks
Cool stuff
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/793e3081-620f-44a2-bf27-d0a8efd96c6a/javascript-three-js-morphing-sphere.jpg)
How to create a 3D morphing sphere effect
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/a7d25393-2b92-4e85-a1d3-6bca091f9082/fullscreenscroll_feat.jpg)
A fullscreen scroll-based slideshow with a content view powered by GreenSock's Observer plugin
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/5bef40f7-d874-4cb7-a0bf-db236c423be5/profile-brooklyn.jpg)
Create an alternative to the loading spinner, using an animated border
Inspiration
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/44668405-35bb-44c8-af93-8358e63a6ea5/BarvVNa.custom.png)
A star rating where stars pop out one by one if you choose a higher rating ⭐️
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b68ead30-57e0-4c49-90e1-58530176a4ed/mdxQjeW-800.jpg)
A cool 80s style 3D scanning laser demo
A mind-blowing use for :has, to create a MacOS-style dock animation
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/dc0c26d0-d14e-433a-8ee9-2e2b05019c6b/fb.jpg)
Bit random but I thought this was quite fun! Build a virtual wooden train track. Lovely 3D work.