Motion Design Resources
Harness the power of motion with these motion design resources.
Learning Axis on YouTube
This channel shows how to make cool graphic animations using CSS. I like this YouTube channel mostly for their shorts, but they have longer videos as well. In their shorts they show CSS code being typed out and then show the actual animation, so you can see that such a cool animation actually isn’t that hard to make and you can see how they did it.
Elimar
Elimar is a great example of the possibilities of motion design in a website. It is an interactive website that tells the story of Vincent van Gogh by showing the history of a newly found painting, “Elimar.” This website has some incredible animations in the background that portray van Gogh through thousands of tiny moving black and white dots. The site uses parallax scrolling to present the information almost like a moving museum presentation.
The Animator's Survival Kit
This book explains the underlying principles of animation and its mechanics. It combines years of practice and the knowledge of numerous masters into a single guide. Useful for all types of animators.
Spline 3D
Spline is a 3D design tool that allows you to incorporate 3D effects into your website. You can create 3D objects and then animate and prototype them so that they do a certain motion or animation when you do something like scroll on your website. It is free and available to use on the browser.
Design Spells
This website is a library of cool motion design examples in websites and apps for inspiration. Every listing has a video showing a cool feature from a website that has innovative motion design.