- CSS Animation Weekly
- Posts
- CSS Animation Weekly #91 ✨ Special: Tools, libraries, inspiration sources and more ✨
CSS Animation Weekly #91 ✨ Special: Tools, libraries, inspiration sources and more ✨
A massive issue this week! We'll be looking into what sorts of tools, libraries and sources of inspiration. Warm up your bookmark bar!
♥️
Donovan at CSSAnimation.rocks
Articles
Ever since i started developing i was fascinated by the vividness of animated applications, they felt alive. And we sure have come a long way, too. There are dozens of tools to choose from today…
Animation libraries
Sometimes you need just the right animation for your project...
On smaller projects I often reach for Animate.css. It's a nicely-build set of CSS animations you can throw into a project.
If you're looking for something a little different, a handy library to keep in mind is Magic Animations. It provides a massive list of transitions and keyframe animations to bring to your project.
Another situation where it's good to get something going quickly is when adding scroll animations. AOS is a great tool for this.
Featured
Over 4 hours of advanced CSS animation tutorials for just $29! Join Donovan as he walks you through each step in creating animated hero pages, hover effects, scroll animations, carousels and more.
Timing functions tools
Timing is everything - and having your own timing functions can add character to your work. These tools can help.
I often reach for Cubic-bezier.com. Maybe it's just what I'm used to but I really like trying out timing functions in this first before applying them to projects.
Another resource to bookmark is Easings.net. This provides a great range of inspiration for finding just the right timing function.
Tools for building animations
As well as putting pre-built animation libraries into our projects, sometimes we need to build more complex animations. The web is full of great tools to help - here are a few.
Billed as "CSS Animations on demand" this tool lets you assemble your own complex CSS animations and export the result for use. A great tool to get started on more complex CSS animations.
This web tool provides a way to generate your own CSS animations, this time using a timeline-based approach
I've used this library myself on some interesting projects - having multiple layers of elements drift around screen based on mouse movements or creating complex animations on banners. It's very powerful and there's a bit of a learning curve but it's very useful and I can recommend it.
This is a powerful animation framework you can use to make your own complex, bespoke animations. Like GSAP, it provides tools for building up long sequences of complex animations, as well as fine control over every aspect of your animation.
Bounce.js is both a tool and library for creating really fun, bouncy CSS animations.
Sources of inspiration
I'm always on the look out for good examples of web animations and currently there's no better place to start than CodePen. It's a great place to see fun examples of animations, and even has articles and guides.
UI Movement is a community of design enthusiasts who share and discuss the most interesting and unique UI designs.
Handpicked code snippets you can use in your web projects. Find website design inspiration with previews and code samples .
This very newsletter! Share it wide and let your friends know where to get a weekly dose of inspiration 💌
Inspiration
Speaking of inspiration, here's some to check out!
Cute Monkey with keyframes animation on the eyes and the ears
A subtle rotating gradient effect
A gorgeous yet simple pure CSS loading effect ✨
Animation in the real world
Nicely choreographed layers of animation on this studio website!
Phew! And that's it for this week. Don't forget to take advantage of my course being only €29 currently! It'll go up soon.
Have a lovely week 👋