- CSS Animation Weekly
- Posts
- CSS Animation Weekly #307 📜
CSS Animation Weekly #307 📜
This week it's a scrolling special - we're exploring some fun scrolling effects as well as animating SVG shapes on scroll!
❤️ Donovan at CSSAnimation.rocks
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/1f03d564-113c-4d7e-911d-101b15486ed6/9a30f191151fe73a09cbd1fc2a5017f9b21ba56b-1200x630.jpg)
A great overview of how we can create fun scrolling effects using CSS ✨
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/594ec6d6-3c49-407d-905b-211a85bf2c97/OnScrollShapeAnimation_feat.jpg)
Animate SVG paths while smooth scrolling a web page using Lenis and GSAP's ScrollTrigger plugin
Inspiration
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/6be393d4-8a2b-4569-9536-6d27ec1f9b4a/imageSocial.jpg)
It would be cool if more architectural projects were demonstrated online like this
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/43a69194-504d-4f98-8455-1846b1b95723/jOZXdoP-800.jpg)
Adjust the little cat's picture frame to make it happy 😺
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/c90eef79-8fd1-42e6-b82e-5545b47a9efe/QWQaRvo-800.jpg)
Stop-motion animation has a great look and this demo shows how to do it using CSS sprites
![](https://media.beehiiv.com/cdn-cgi/image/fit=scale-down,format=auto,onerror=redirect,quality=80/uploads/asset/file/b7c7449f-276e-48aa-b377-e97f74dd1c5b/social.jpg)
Some amazing scroll animations on this exploration of the aviation world!
That's all for this week!