Ever wondered how our animations come to life at SF? You’ll find a chef may have a perfect recipe that’s been handed down through generations, or a mystical witch will have a secret blend for their magical love potion. With motion, there are 12 not-so-secret herbs and spices that transform static drawings into appealing animations. Today, we’re looking at the 12 Principles of Animation, taking a peek into the world of movement and uncovering the illusions behind the screen.
Let’s take it back a bit
The 12 Principles of Animation were introduced in the book: The Illusion of Life: Disney Animation from 1981. The list was a small part of the book, but has been used prominently in animation ever since. It collated 12 techniques Disney animators used to capture emotion, show depth and develop characters. It’s a great book, and I’d highly recommend it to anyone interested in motion graphics or animation.
What are these principles?
Squash and Stretch: Think of this as the elastic magic that gives life and flexibility to the subject. Just as a rubber ball will squash when it hits the ground and stretches when it bounces back up again, applying squash and stretch to animations adds an impression of weight, impact, and realism.
Anticipation: Notice how Donald winds up his body before throwing his weight behind his movement, that’s antici……pation. By bringing in a visual cue before the main action, it lets the viewer know something is about to happen, the suspense builds, and then bang! It’s all about making actions feel more natural and believable.
Staging: Imagine yourself, sitting in the director’s chair on a Hollywood film choosing what and who is in the shot. Staging in animation is the same, it’s about guiding the viewer’s eye and attention to the most important aspect of the scene. Keep the audience focussed on what matters most, enhance engagement and keep the story clear.
Pose to Pose: Pose-to-pose is not some kind of boy band choreography, it’s when designers create key poses at important moments in a movement, then fill in the gaps with transitional frames. Build a base, to figure out timing and rhythm and then sprinkle over the spice.
Follow Through and Overlap: As a character comes to a sudden stop, notice how their hair or clothes will continue to sway before settling down at a complete stop. That’s follow-through and overlap in action. Again, we’re just mimicking natural movements to add realism to our work.
Ease In, Ease Out: When driving a car, or in this case, riding a horse, you don’t just magically get to top speed immediately, you have to accelerate, the same goes for stopping, you come to a gradual stop. This is the same premise, you can have snappy easing or gentle easing, but it’s crucial to have things speed up and slow down when leaving and arriving at their destination.
Arcs: Great animation has curves in aaaaall the right places! We’re referring to the paths an object follows, not what you were just thinking… disgusting. To keep things grounded in reality, designers will animate the subject along a natural trajectory giving it a lifelike, visually appealing feel.
Secondary Action: From the suds getting lathered up and bubbles floating around the room, to the sweet tune Mickey is whistling in the tub, these secondary actions are smaller, more subtle movements, but help sell in the main action by adding depth and complexity to the story.
Timing: Having total control of the timing and rhythm of the subject allows designers to become a master puppeteer. Deciding what emotions you want to convey, where you want the emphasis and how you want your story to be told.
Exaggeration: This is… by FAR… THE MOST IMPORTANT of the 12 principles. Okay, that may have been a slight exaggeration. While we are trying to make pixels on a screen into realistic, emotive subjects, we also have creative licence to bend this slightly. We can nip outside of the laws of physics and really amp up the movement to add more impact, humour and personality.
Solid Drawing: The skeleton of any animation will begin in a notebook, then develop onto the screen later on. Knowing how to draw in 3D space by having a good gauge of an object’s weight and volume is essential for making your animation feel tangible from the get go.
Appeal: Appeal, charisma, magic, beauty – there are a lot of words you would use here, but it’s one of those things that you just know when you see it. It’s the perfect combination of great design, a captivating subject and the ability to communicate the story well through them.Â
So there it is, the 12 Principles of Animation. It’s what us Motion Designers and Animators all have tattooed on our backs, it’s the commandments we live by, guiding us all towards an ease-ier life!
Want to dive deeper into our process? Check out our Motion Manifesto to see step-by–step how we can take your ideas and turn them into motion masterpieces.
Looking for a little inspiration? Head over to our Case Studies page to see more of our motion. These are real world examples where we’ve used motion to bring campaigns, websites and brands to life.
Cheers, G 🤖