I've been asked about web animations and if I can share some resources regarding them. They are a part of my day to day work, so I am getting quite used to working with a multitude of different methods of creating and developing animations for the web.
That being said, I know it can be difficult to get into, even more difficult to master! - like anything really. So, I decided to gather together some resources to help out (myself) and others learn more about and get inspired by web animation.
Web Animation Newsletters
The UI Animation Newsletter
An excellent collection of UI animation related content, lovingly curated by Val Head.
Web Animation Weekly
A hand-picked selection of articles, videos, book reviews, and other goodies pertaining to the wonderful worlds of web animation and motion design! Created and curated by Rachel Nabors (and friends).
Tutorials and Courses
Learn CSS Animation - Animation Rocks
Quick resources and short course on levelling up your css animations.
Codrops Tutorials
Great site showcasing some of the most modern web technologies and how they can be used. Warning - check the browser compatibility!
Superhi - Advanced CSS and Javascript
I can personally vouch for this course, being a student of it myself! Easy to follow course for helping to remind and boost your CSS and Javascript based animation knowledge.
Skillshare
Community based short course submissions, with a wide range of courses and themes. Can be a little hit and miss, but you can learn a great deal very quickly! If you want to signup, you can using my share code here.
tutsplus
Another online code school. This article leads off to a multitude of different short courses focussing on CSS as well as JS animation.
Inspiration Websites
UI Movement
UI Design and animation inspiration blog and newsletter.
Awwwards Animation Collection
A fantastic resource for finding inspiration of sites that actually exist (rather than animation mockups).
Dribbble
This really popular sharing platform is a great source of inspiration for UI animations.
Codepen
Awesome online tool for quick prototyping or just browsing other peoples prototypes and learning from their code.
Helpful tools
Easings
Nice tool to help you quickly remember css timing functions.
People To Follow
Chris Gannon
Rachel Nabors
Val Head
Nat Cooper
Daniel 'Best Served Bold'
This is by no means an exhaustive resource list. Do you have some resources that have really helped you learn more? Or some inspiring people you'd love others to know about? Think they should be added to this list? Then please let me know!
Top comments (0)