Back in the 1930s, a pioneering shift occurred in animation when Disney developed a framework of 12 core principles designed to elevate animated characters into emotionally resonant, lifelike figures. These animation fundamentals form the cornerstone of traditional and modern animation, remaining as influential today as they were at their inception. Whether you aim to become a motion designer or a full-time character animator, mastering these principles is the key to producing captivating, believable sequences that draw viewers into the story.
In partnership with Created, an advanced online learning environment for aspiring creatives, this guide introduces you to each principle in detail. Created offers an immersive Motion Design Taster course for those eager to experiment with these techniques firsthand. For those ready to elevate their animation journey, Created's full suite of motion design training programs provides comprehensive industry guidance, practical projects, and a professional-grade portfolio tailored for real-world success.
1. Flex and Compress
Among the most foundational principles in animation, squash and stretch is an indispensable tool for adding life, energy, and believability to animated sequences. This method allows objects and characters to mimic the physical attributes of elasticity and weight by stretching or compressing their forms during motion. Despite the transformation of shape, the object's volume is preserved, maintaining a sense of realism amid the exaggerated actions. This illusion of volume and force can be observed in various scenarios—from a bouncing ball to a character’s expressive facial movements.
When animating a rubber ball falling to the ground, its elongated form during descent conveys acceleration and speed. Upon impact, the ball compresses horizontally, suggesting force and weight. This transition between shapes isn’t random; it follows the laws of physics adapted for visual storytelling. In character animation, this principle enables deeper emotional expression—stretching a face to exaggerate laughter, or squashing it to show impact or frustration.
Without this principle, animated characters would lack dynamism. Movements would appear flat and artificial. Squash and stretch provides a kinetic language that viewers instinctively understand. Even in minimalist or abstract animation, this principle offers a sense of physicality that resonates universally. It bridges the gap between stylization and believability, allowing characters to inhabit a world that feels both imaginative and grounded.
Furthermore, squash and stretch isn't limited to organic beings. Mechanical or abstract forms can benefit too. A bouncing logo, a spinning gear, or a UI element reacting to user input can use this technique to enhance clarity and engagement. In motion design, this approach is especially useful in building interaction feedback that feels intuitive and responsive.
For any animator or motion designer, mastering squash and stretch is essential not only for character work but for motion graphics, interface animations, and any scenario where visual rhythm and realism are needed. It’s the heartbeat of expressive animation, providing both stylistic flair and physical believability.
2. Setup for Motion
Anticipation is the subtle yet powerful setup for action that gives animation its rhythm and intentionality. It acts as a visual cue, allowing audiences to prepare for what is about to happen. In essence, it’s the moment that occurs before the primary movement, providing context and enhancing believability. Without this principle, actions seem too sudden or mechanical, disconnecting viewers from the flow of motion.
A classic example can be seen in sports animation. Before a basketball player jumps to make a slam dunk, there's a preparatory crouch—a subtle downward bend that signals intent. The body coils before releasing energy. This visual language speaks volumes. It communicates readiness, emotion, and physics in a single movement.
In animation and motion design, anticipation enhances realism by slowing down the pacing right before a key action. This slowing allows the viewer’s eye to settle, making the subsequent movement more powerful and intentional. It sets the stage for surprise in comedic scenes or for suspense in dramatic moments. Even mundane actions—like turning a head or raising an eyebrow—benefit from anticipation. The slightest twitch or pause before the main gesture can bring authenticity and personality to a character.
In user interface design and digital interaction, this principle is used to create feedback loops. For instance, a button may slightly depress before triggering an animation, visually suggesting cause and effect. Anticipation here helps the user predict interaction outcomes and reinforces intuitive navigation.
Anticipation also plays a critical storytelling role. It can create emotional tension, guide viewer attention, and control pacing. In visual storytelling, this brief moment of stillness becomes a tool of narrative depth. A well-executed anticipation sequence transforms even a simple motion into a storytelling beat that resonates on a psychological level.
When anticipation is strategically implemented, every motion becomes meaningful. It bridges the gap between animation and storytelling, ensuring your visuals do not just move—but communicate.
3. Visual Hierarchy
Staging is the strategic arrangement of elements within a frame to ensure that the most important actions or subjects are clearly communicated. At its core, this principle is about directing the viewer’s focus. In a world full of constant visual stimulation, clarity is crucial. Through precise staging, animators and motion designers guide the eye exactly where it needs to be, making sure the story or message is absorbed effortlessly.
This concept finds its roots in theatrical performance, where lighting, blocking, and composition dictate audience engagement. In animation, similar methods are employed. Composition, lighting, contrast, movement, and negative space all serve to frame the focal point. A character positioned in the foreground with high contrast and motion will automatically draw attention, while background elements should remain subdued to avoid distraction.
Staging not only defines where to look but also when. For instance, if multiple characters are on-screen, careful timing and spacing ensure the viewer processes each action in sequence rather than all at once. This avoids visual overload and enhances emotional engagement. Great staging clarifies relationships, emotions, and intentions between characters or objects.
This principle is especially critical in motion design. In animated infographics or UI transitions, staging ensures that the user can follow information flows intuitively. A sudden data visualization or icon transition must be clear, sequenced, and prioritized—exactly as in narrative animation.
Moreover, staging contributes to tone and atmosphere. A well-staged scene can feel intimate, suspenseful, or chaotic depending on how elements are placed and animated. Shadows can imply secrecy, open spaces can suggest isolation, and overlapping elements can create tension. These choices are subtle but powerful.
Ultimately, poor staging leads to confusion and disengagement. Excellent staging makes an animation not just watchable but visually and emotionally effective. It is an art of balance, rhythm, and spatial storytelling that ensures every frame speaks clearly and purposefully.
4. Frame-by-Frame vs Key Moments
One of the critical decisions in an animator’s workflow lies in choosing between straight-ahead and pose-to-pose animation. Both techniques have their own advantages, and understanding when and how to use them is essential for creating compelling, professional-grade motion.
Straight-ahead animation is a linear process where each frame is drawn in succession. This method allows for spontaneous, fluid motion and is ideal for unpredictable phenomena like smoke, flames, or flowing fabric. It fosters creative momentum and can produce highly organic sequences. However, it’s more difficult to control in terms of structure and proportion, especially with complex characters or scenes requiring consistent timing.
Pose-to-pose animation, on the other hand, begins with the definition of key poses—those critical frames that outline the motion’s start and finish. Once the keyframes are established, the in-between frames are filled to complete the motion. This method is more strategic and controllable, making it ideal for choreographed actions or emotional expressions. It’s easier to adjust timing, maintain proportions, and plan complex sequences.
In professional workflows, animators often blend both techniques. For instance, they may use pose-to-pose to lay down the performance and story beats, and then add straight-ahead animation to enrich the motion with subtle overlapping actions, effects, or secondary gestures. This hybrid approach captures both clarity and fluidity.
In motion design, these methods manifest slightly differently. For UI animations, pose-to-pose principles govern transitions and states, while straight-ahead techniques may be used for animated flourishes or responsive microinteractions. Understanding the intention behind each movement helps designers decide which method best suits the purpose and medium.
The choice between the two is not just technical but also stylistic. Straight-ahead can give a scene spontaneity, whereas pose-to-pose often provides drama and clarity. Mastering both equips animators with a versatile toolkit to handle any animation challenge, from action sequences to intricate digital compositions.
5. Motion Continuity
Motion continuity, encapsulated in the principles of follow-through and overlapping action, brings a remarkable level of sophistication to animated scenes. When an object or character stops moving, its various components—limbs, hair, clothing, and accessories—don’t halt instantaneously. Instead, they continue to move independently, obeying the natural inertia they’ve gathered. This residual motion is what gives animation its convincing, lifelike quality.
Consider an animated figure sprinting across a field. When they come to a sudden stop, their torso might stabilize first, but their scarf continues to flutter, their hair sways forward, and their arms take an extra beat to settle. These reactions are not just embellishments—they are essential for portraying realistic physics and internal body mechanics. Without them, characters would appear stiff, robotic, and emotionally disconnected.
Overlapping action also allows different parts of the body to move at varying times. For example, when a character throws a punch, the shoulder initiates the action, followed by the elbow, and finally the fist. Each part leads and trails in sequence, introducing a cascading effect that mirrors natural movement. These subtleties create visual rhythm and texture, transforming simple actions into rich visual experiences.
In motion design, follow-through enhances the impact of kinetic typography or interface transitions. When a UI element slides into place, a slight bounce or extended motion in sub-elements can help communicate momentum and responsiveness. These nuanced details strengthen user engagement and create a polished, refined impression.
This principle also plays a critical role in character animation where emotional undertones matter. The gentle sway of a character’s arms after a heartfelt hug or the slow drift of hair following a dramatic turn—these delicate motions reinforce mood and intention. Animation is storytelling through movement, and continuity in motion ensures every movement feels earned, deliberate, and immersive.
6. Easing Movement
Real-world movement is rarely uniform or abrupt. In animation, the principle known as "slow in and slow out" is the technique used to replicate this natural ebb and flow. It dictates that objects accelerate slowly from a stationary position and decelerate gradually as they come to rest. This transition of speed adds a graceful realism to animated actions and is critical to portraying believable motion.
Imagine animating a falling leaf. As it begins to drop, it gains speed, descending quickly through the air. As it nears the ground, it slows, twirling delicately before landing. Without easing, the leaf would fall at a constant speed, making the animation feel mechanical and detached from reality. By adding more frames at the beginning and end, and spacing them farther apart in the middle, the animation mimics the subtleties of natural motion.
Easing is crucial for emotional storytelling. For example, when a character raises their hand to wave, the slowness at the beginning implies thought or hesitation. A fast start followed by a gentle stop suggests energy or enthusiasm. Easing injects psychology into motion—transforming simple actions into communicative gestures.
In motion design, easing refines transitions and interactions. Buttons that respond with smooth acceleration and deceleration feel modern and intuitive. Graphs that animate into view with gradual velocity feel more polished and easy to read. These fluid transitions improve user experience and leave a lasting impression of quality and intentionality.
Easing also allows animators to pace scenes effectively. By slowing the motion at key moments, it becomes possible to draw attention or evoke emotion. It can enhance a character’s dramatic pause or amplify the impact of an unexpected reveal. Ultimately, easing is not just about smoothness—it is about expressing depth, personality, and a profound understanding of movement.
7. Natural Motion Paths
The principle of arcs plays a vital role in reinforcing the believability of movement in animation. In nature, living beings and even most mechanical objects move in arcs rather than straight lines. From the gentle swing of a pendulum to the trajectory of a thrown stone, curved paths are omnipresent in the physical world. When these natural paths are omitted in animation, movement appears artificial and stilted.
In character animation, arcs can be found in the swing of a leg during a walk, the arc of an arm in a wave, or the tilt of a head turning in curiosity. These curves create a sense of continuity and grace. They allow the viewer’s eye to follow the action intuitively, without interruption. Even in high-impact scenes, arcs give motion weight and believability.
Without arcs, even well-drawn characters can appear to float or jerk unnaturally. A punch thrown in a straight line lacks the force conveyed by an arcing motion. A jump that follows a curved trajectory feels natural, while one that rises and falls in a straight path feels stiff and ungrounded. This principle is essential not only for realism but also for appeal.
In motion graphics, arcs are crucial for guiding viewer attention across the screen. A notification that swoops into place on a curve feels inviting, while one that slams in directly can feel jarring. Curved motion creates a visual cadence that is easier for the brain to follow. It adds elegance and predictability, making animations feel considered and human-centered.
Furthermore, arcs contribute to character and mood. A sweeping, exaggerated arc suggests flamboyance or joy, while a tight, abrupt curve may imply tension or urgency. These visual cues enhance storytelling and deepen emotional impact. Arcs connect the tangible physics of our world with the stylized artistry of animation, grounding fantasy in familiarity.
8. Adding Depth with Subtlety
The principle of secondary action is the art of layering movement to add nuance, dimension, and authenticity to animated scenes. While the primary action captures the central intent—walking, talking, jumping—the secondary actions embellish the scene, revealing emotion, personality, or mood through smaller, supportive gestures.
For example, imagine a character delivering a monologue. The words and mouth movements are the primary action. But if the character nervously shifts weight, fiddles with a necklace, or blinks irregularly, these secondary actions communicate anxiety, hesitation, or introspection. They offer the viewer psychological insight without needing additional dialogue or exposition.
In animated storytelling, secondary actions make characters feel real. They express complexity, capturing those involuntary motions that make us human. A dog wagging its tail while barking, a character’s hat tilting slightly as they walk, or a hero clenching their fists during a determined stride—these layers of motion elevate the animation from mechanical to deeply expressive.
Importantly, these secondary movements must not compete with or overshadow the primary action. They exist in service of the main narrative, offering support and enhancement. When done correctly, they add a rhythm to the scene, engaging the audience on multiple levels simultaneously. They deepen the illusion of life, making animated figures appear truly aware of their surroundings.
In motion design, secondary action is applied in subtler ways. During a transition, a text box might fade in with a delay while a background element drifts slightly, or an icon may pulse subtly while another animation plays. These refinements create a sense of completeness and polish, allowing the scene to breathe while still remaining focused.
Secondary action is where craftsmanship shines. It demonstrates an animator’s sensitivity to movement and emotion. It bridges the divide between functional animation and artistic expression, creating a visual experience that feels organic, textured, and alive. The more precise and purposeful these micro-movements, the greater the viewer’s emotional investment becomes.
9. Weight Through Timing
Timing is the invisible force that breathes rhythm, emotion, and dimensionality into animated sequences. It is not merely a technical detail—it is the soul of movement. By adjusting the number of frames used to depict an action, animators influence how viewers perceive the mass, intent, and energy behind it. A motion that spans twelve frames might evoke elegance or floatiness, while the same movement compressed into four frames can imply urgency, strength, or surprise.
This principle plays a pivotal role in simulating gravity and physical resistance. For instance, if a bowling ball and a balloon are pushed with the same gesture, their timing must differ to communicate their contrasting weights. The balloon might drift lazily, while the bowling ball should accelerate sharply and decelerate with an emphatic halt. Without the nuanced application of timing, such differences are lost, flattening the visual narrative.
Timing also dictates character temperament and emotion. A lethargic character might move with delayed, sluggish timing, conveying weariness or indifference. In contrast, a sprightly character exhibits sharp, rapid movements filled with vitality. Timing crafts personality as much as it crafts physics. Pauses, in particular, are valuable tools—elongating them can build suspense, add humor, or inject gravitas into a dramatic scene.
In motion design, timing informs the user experience and dictates the mood of an interface. Whether it's a loading animation that reassures users with rhythmic pacing or a swipe transition that ends with a playful bounce, every microsecond contributes to the product’s perceived responsiveness and sophistication.
Timing is also essential for synchronization with audio, particularly in sound-driven animations or explainer videos. When motion aligns precisely with beats or vocal cues, the result is not just harmonious—it’s mesmerizing. Mastering timing means mastering the delicate relationship between space, speed, and story. It’s one of the most subtle yet defining skills in the animator’s toolkit, distinguishing competent animation from compelling, unforgettable work.
10. Push the Limits
Exaggeration is the expressive core of animated storytelling. While grounded in observation and reference, animation has the rare ability to heighten reality—to take the familiar and make it extraordinary. This principle involves deliberately stretching proportions, expressions, timing, or motion paths beyond naturalistic limits to emphasize narrative clarity or emotional resonance. It invites animators to amplify truth rather than simply replicate it.
A character startled awake might leap five feet into the air with eyes bulging like saucers. Though not physically possible, the reaction communicates shock more viscerally than any photorealistic depiction ever could. In action scenes, exaggeration makes punches more impactful, crashes more dramatic, and gestures more readable. The principle allows viewers to experience intensity in a distilled and stylized way.
Exaggeration also functions at a stylistic level. In abstract or motion design contexts, elements might morph, spin, or explode in ways that ignore real-world constraints. These visual hyperboles can define brand identity, direct viewer attention, or make complex data more digestible. Motion designers often use exaggeration to build visual metaphors—where a graph surges like a wave or a shopping cart icon hops playfully when clicked.
The key to effective exaggeration lies in control. Overuse can make animations feel chaotic or comedic when the tone demands restraint. It's a balancing act, where the goal is to enhance clarity and emotional response without overwhelming the viewer. Subtle exaggeration in timing or spacing can give just enough stylization to elevate realism without breaking immersion.
Ultimately, exaggeration celebrates the medium’s creative liberty. It allows animators to depart from reality without losing connection to it, crafting visuals that are bold, memorable, and emotionally rich. Whether used to heighten drama, inject humor, or define aesthetic identity, exaggeration is a powerful narrative device that transforms the ordinary into the extraordinary.
11. Drawing with Intent
Solid drawing is the technical and conceptual foundation that underpins every frame of effective animation. More than just clean lines or anatomical accuracy, this principle emphasizes the importance of understanding form, structure, volume, perspective, and lighting. Every animated element—be it a humanoid figure, a stylized animal, or a morphing geometric shape—must exist in a space governed by three-dimensional logic.
The ability to visualize objects in volume allows animators to rotate characters convincingly, depict foreshortening accurately, and transition between poses smoothly. Without this spatial understanding, animated forms collapse, lose consistency, and appear disjointed. Solid drawing provides the visual scaffolding that makes complex motion coherent and believable.
Good drawing also reflects emotional intelligence. Expressions are not just a configuration of features—they are sculpted volumes reacting to tension, weight, and mood. A clenched fist is not simply a circle with lines; it is a compact form conveying force, stress, or defiance. Drawing with intent means designing with purpose, using every contour and gesture to reinforce character, context, and emotion.
In motion design, the essence of solid drawing translates into design fundamentals—typographic balance, shape language, and visual hierarchy. Elements must flow cohesively across frames, retaining their weight and legibility as they move. Whether animating a logo reveal or a data visualization, an understanding of structure ensures that the motion feels deliberate and integrated, not arbitrary.
Moreover, this principle applies equally to 2D and 3D disciplines. Even in digital sculpting or rigging, the animator's eye for volume and silhouette informs how rigs deform, how poses read, and how shapes transition. Solid drawing is a skill that transcends tools and software—it is the animator's fundamental lens on the world.
Aspiring animators should devote time to sketching, gesture drawing, and anatomy studies, not as isolated exercises, but as a way to embed intuition into their craft. When drawing becomes intentional and informed, every frame becomes a sculpted moment that advances story, emotion, and movement with elegant precision.
12. Make it Captivating
Appeal is the magnetic pull that makes characters, objects, or entire compositions irresistibly watchable. It is not about beauty in the conventional sense—it is about design choices that resonate, entertain, and emotionally connect with viewers. Whether through symmetry, asymmetry, contrast, rhythm, or simplicity, appeal is what elevates design from functional to unforgettable.
Appealing characters possess personality through their silhouettes, proportions, and expressions. A villain might have angular features and a hunched posture, while a comedic sidekick could be short, round, and expressive. These choices communicate role and temperament before a single word is spoken. In animation, appeal ensures that characters are not only believable but also engaging—even when they are antagonistic, abstract, or minimalist.
In motion design, appeal is equally vital. A clean animation sequence with refined easing, considered spacing, and elegant transitions captures attention far more effectively than complex but incoherent movement. Visual appeal invites viewers to linger, absorb, and enjoy. It reflects craftsmanship, taste, and clarity of vision.
One of the key techniques in cultivating appeal is simplicity. Designs overloaded with detail can become visually noisy and overwhelming. Streamlined shapes, bold silhouettes, and concise motion paths tend to communicate more effectively. Simplicity does not mean lack of depth—it means clarity of intent. The most iconic characters and visual identities in animation are often built from simple but powerful design elements.
Appeal also plays a central role in character animation’s emotional resonance. A character can cry, shout, or laugh—but unless the design invites empathy, the emotion won’t land. Strong appeal ensures that viewers invest emotionally, root for the protagonist, and remain engrossed in the story.
To develop appealing animation, animators must constantly refine their eye for design and empathy. They must observe how real people move, express, and interact, then interpret that reality through a creative, intentional lens. Appeal is not just a principle—it is the heartbeat of animation, where technique and artistry meet to create visuals that truly connect.
Level Up Your Animation Journey
For creatives ready to explore the limitless potential of animation and motion design, Created provides a cutting-edge learning path. Their online courses are led by seasoned industry professionals and are structured around real-world briefs, enabling you to build a career-ready portfolio while mastering each of these 12 core principles. Created’s flexible format allows you to learn at your own pace while engaging with mentors, collaborators, and industry experts. Whether you're refining your drawing skills, practicing timing in animation, or testing your storytelling chops, Created equips you with the right tools, knowledge, and experience to break into the animation world with confidence.
Explore Created today, and transform your passion for animation into a profession that’s creative, fulfilling, and future-ready.
Final Thoughts:
Animation is more than just movement on a screen—it's the art of breathing life into static forms, transforming ideas into stories that resonate with emotion, personality, and rhythm. The 12 principles introduced by Disney nearly a century ago remain just as relevant today, forming the essential framework behind every compelling animation, from full-length feature films to sleek motion design pieces for digital media. Mastering these principles isn’t just about technical execution—it’s about understanding the psychology of motion, the subtlety of gesture, and the power of visual storytelling.
Whether you're using squash and stretch to exaggerate a cartoonish leap or applying anticipation to build tension before a dramatic reveal, every principle adds a layer of depth and believability to your work. Techniques like arcs, secondary action, and slow in/slow out aren’t decorative—they are what separate mechanical movement from expressive performance. When these methods are applied thoughtfully, characters become relatable, actions become impactful, and viewers become emotionally invested.
For aspiring motion designers, these principles also lay the foundation for professional excellence. Clients and studios seek creatives who not only know how to make things move but understand why they move the way they do. Solid drawing reinforces the structure behind your visuals, while appeal and exaggeration ensure they stand out in an oversaturated media landscape. Good timing doesn’t just show physics—it shows storytelling, personality, and intent.
Learning these techniques doesn’t have to be a solitary or overwhelming process. Platforms like Created offer structured, accessible, and real-world-based motion design training that lets you apply these principles immediately to portfolio-quality work. With guidance from industry experts, practical briefs, and a flexible online setup, Created ensures that your animation journey is both creatively rewarding and professionally aligned.
As the creative industry continues to grow and diversify, the demand for skilled animators and motion designers is rising. By internalizing these timeless principles and continuing to sharpen your creative instincts, you’ll not only elevate your animations—you’ll shape stories that stay with people. Now is the perfect time to begin. Let your characters breathe, let your scenes speak, and let your creativity move the world.
