How can we use animation as a creative tool?
Last Updated on October 13, 2024
Motion Principles
Method 1 | Motion Training
Get the Basics
Assignment
Choose from the following exercises and practice applying the Motion Principles in Adobe After Effects. Give each exercise a title.
Delivery
1920 x 1080 px, Codec: h.264
Move a basic geometric shape from the top into the picture. Imagine there is a gravitational force and an invisible floor. The shape lands on it and bounces off. Materiality of the shape: Rubber ball
Move a basic geometric shape from point A to point B. Change the shape during the movement so that it arrives at point B as a different basic shape. Try to repeat the same from B to A, varying the animation.
Move a basic geometric shape as if it were being pulled to one side by a short but invisible rubber band, held briefly and then released. Materiality of the form: Concrete block
Move a tower of three basic shapes from point A to point B. The three shapes interact with each other. Try to repeat the same from B to A, varying the animation.
Arrange a minimum of 3 and a maximum of 5 basic shapes. Try to use composition and movement to draw the viewer's attention to a single shape that you have chosen.
Move a basic geometric shape from point A to point B. Imagine the shape is on an invisible road. It drives off, brakes and stops at B. Try to repeat the same from B to A, varying the animation. Materiality of all shapes: A-B: slippery material, B-A: concrete
Move a geometric object from point A to B. Imagine that your object is an arrow which is released and lands on the ground. Try to use the same arch from B to A, varying the animation. Materiality of the shape: Rubber ball
Move two geometric shapes freely in space as if they were being controlled by a jet engine. Exaggerate and vary the movements.
Move two geometric shapes from point A to point B. Imagine that the two are connected by an elastic band. The object in front pulls the object behind it. Try to repeat the same from B to A, varying the animation. Materiality of the shapes: A-B: paper, B-A: concrete
Move a geometric shape in the center of the picture in a manner that makes it appear three-dimensional.
Move a geometric shape from point A to point B. Imagine that the rear object pushes the front object and stops. Try to repeat the same in the opposite direction, varying the animation.
Move two geometric shapes as if they were alive and dancing.
Method 2 | Motion Characteristics
Build Character
All the elements on a screen are like performers on a stage: every main character in a play has a specific reason for being there (plot). More importantly, each character has certain characteristics. It is these characteristics that determine the behavior of our participants and thus bring out their personality.
Assignment
Choose one property and try to interpret it by using basic geometric shapes and animation.
motivated, old, young, happy, unhappy, flawed, active, calm, lethargic, focused, expressive, informative, processing, friendly, aggressive, funny, serious, playful, strong, weak, interested, disinterested, cultivated, sociable, in love
Method 3 | Your Motion Characteristics
Build your own Motion System
Assignment
Once you feel confident with the exercises you have selected, expand your knowledge of Motion Principles by looking for other principles. Think about which principles could be useful for your current project.
Requirements
- Sketch out ideas for animations in which you would like to apply the newly discovered Motion Principles.
- Build your sketched ideas in Adobe After Effects and animate them. Export each one as a video file.
Motion Principles
Linklist
You can find further input here:
UX related:
https://medium.com/free-code-camp/the-principles-of-ux-choreography-69c91c2cbc2a
https://www.nngroup.com/articles/animation-purpose-ux/
Brand related, Google:
https://material.io/design/motion/understanding-motion.html#principles
https://www.wolffolins.com/case-study/uber/
Others: https://i.pinimg.com/originals/5d/c0/32/5dc0327b106b3b8ccaeb2151e625a5fe.gif
https://www.behance.net/gallery/52256993/10-Principles-in-Motion-(UI-Animation)
Find your own:
Be inspired by the collection of links and look for additional examples that could be relevant for building your own motion design system.