Animation Principles for Motion Graphics | Butter

Every animator is an actor. It's a bit more abstract when doing motion graphics as opposed to cartoons, but it's still true! Your motion brings visuals to life, and the choices you make in your animation control the character of that life. If you are using code as your medium, how do you go about doing that? There are a few techniques that give you a solid foundation to work with: easing, staggering, and secondary motion. I'll go over what that those are and what they look like in code.

Every animator is an actor. It's a bit more abstract when doing motion graphics as opposed to cartoons, but it's still true! Your motion brings visuals to life, and the choices you make in your animation control the character of that life. If you are using code as your medium, how do you go about doing that? There are a few techniques that give you a solid foundation to work with: easing, staggering, and secondary motion. I'll go over what that those are and what they look like in code. A test case for motion Let's say you have a number of items that you want to animate in. Here's a quick…

saved by

• Yash Soni

related reading

• 12 Principles of Animationuserinterface.wiki
• animations.devanimations.dev
• The Easing Blueprintanimations.dev
• 7 Practical Animation Tipsemilkowal.ski
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• Motion Graphic Design & Animation Principles Website - Zajno Digital Studiomotion.zajno.com
• Inside Framer's Magic Motionnan.fyi
• Great Animationsemilkowal.ski
• Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
• Anime.js | JavaScript Animation Engineanimejs.com
• The Web Animation Performance Tier List | Motion Magazinemotion.dev
• You Don't Need Animationsemilkowal.ski