- CSS Animation Weekly
- Posts
- CSS Animation Weekly #79 - Stack Motion effects, CSS Clip Path, Micron.js and more
CSS Animation Weekly #79 - Stack Motion effects, CSS Clip Path, Micron.js and more
This week we're exploring how motion effects can help us demonstrate stacks of items, learning how the new "clip-path" property can be used on SVG, and checking out a handy micro-interaction library.
♥️
Donovan at CSSAnimation.rocks
(P.S. If you already signed up for my course, do let your friends know of the special discount, it'll go back up soon once the final module is finished ✨)
A handy tutorial on creating hover animations for stacks of items
Thinking about animating SVGs? Here's a handy guide to using `clip-path`
This looks like a very powerful way to add animated micro-interactions to your UI
A nicely written guide to getting started with CSS transitions and transforms ✨
Featured
I’ve been called crazy, but really I’m delighted to be able to share this 4-hour course and see how many people it’s helping. Join hundreds of designers and developers learning how to bring websites to life with animations, transitions, scroll effects, carousels and more.
Inspiration
Nice, subtle pure HTML/CSS animation
Charming bit of HTML/CSS animation work 🧙♂️
Based on the loading screen of the Nintendo Store, this CSS animation makes use of CSS variables
Scroll to see the background transform from day to night 🌗
Slide show where the person in the current frame is used to zoom into the next frame
A nicely illustrated SVG animation showing the difference between deployments and functions as a service. Still have no idea what that all means though 😵
A very zen little animation that looks a little bit like a raindrop hitting a pond 💧
Animation in the real world
A company setting out to push the future of web technology, and it shows. Everything from their site to their work is jaw-droopingly amazing 😲