{"id":10362,"date":"2022-02-07T05:18:43","date_gmt":"2022-02-07T10:18:43","guid":{"rendered":"https:\/\/kscgd.com\/2026spring\/466\/?page_id=10362"},"modified":"2026-02-18T19:49:47","modified_gmt":"2026-02-19T00:49:47","slug":"10-principles-of-animation","status":"publish","type":"page","link":"https:\/\/kscgd.com\/2026spring\/466\/resources\/10-principles-of-animation\/","title":{"rendered":"10 Principles of Animation"},"content":{"rendered":"\r\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"889\" class=\"wp-image-12358\" src=\"https:\/\/kscgd.com\/2026spring\/466\/wp-content\/uploads\/2026\/02\/10_Principles_Motion_Design.gif\" alt=\"\" \/><\/figure>\r\n\r\n\r\n\r\n\r\n\r\n<p><strong>1\/ Timing, Spacing and Rhythm<\/strong><br \/>Timing means the number of frames between A and B; between keyframes. Spacing refers to how those frames are placed. Closer together and the speed is slower, farther apart the the speed is faster. Rhythm is how the animation corresponds to the beats of an accompany audio track.<\/p>\r\n\r\n\r\n\r\n<p><strong>2\/ Eases<\/strong><br \/>Animation, like motion in the real world, needs acceleration and deceleration to have personality. Nothing moves at constant velocities. Linear animation may have a place depending on a specific concept, but as a rule you should always use and manipulate eases to create better animation.<\/p>\r\n\r\n\r\n\r\n<p><strong>3\/ Mass and Weight<\/strong><br \/>Through the manipulation of eases we can describe, via motion, how heavy or light an object on screen is.<\/p>\r\n\r\n\r\n\r\n<p><strong>4\/ Anticipation<\/strong><br \/>Anticipation is something that helps animations feel more purposeful. It tells the viewer something is about to happen and draws attention to an action.<\/p>\r\n\r\n\r\n\r\n<p><strong>5\/ Arcs<\/strong><br \/>Almost every animation follows a path of arcs. Arcs are how most objects move naturally.<\/p>\r\n\r\n\r\n\r\n<p><strong>6\/ Squash, Stretch and Smears<\/strong><br \/>Squash, Stretch and Smears are useful tools in animation to not only replicate how an object reacts to speed and impact, this principle helps to convey the idea of flexibility and for an animation to feel more natural. When an object squashes it should always retain its mass, mathematically.<\/p>\r\n\r\n\r\n\r\n<p>The principle of stretching and squashing can be taken further to create smears. In film really fast objects are read in one frame with motion blur. But because you couldn\u2019t do that in animation, early animators \u2028created smears.<\/p>\r\n\r\n\r\n\r\n<p><a href=\"http:\/\/animationsmears.tumblr.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Animation Smears Tumblr<\/a><br \/><a href=\"https:\/\/vimeo.com\/173793865\" target=\"_blank\" rel=\"noopener noreferrer\">Ping-Pong Animation example<\/a><\/p>\r\n\r\n\r\n\r\n<p><strong>7\/ Follow-Through and Overlapping Action<\/strong><br \/>Follow through is the idea that certain elements will continue to move even \u2028after the main action is completed. Overlapping action is similar in that some parts of the animation are playing \u201ccatch-up\u201d to the main animation.<\/p>\r\n\r\n\r\n\r\n<p><strong>8\/ Exaggeration<\/strong><br \/>Just as the word suggests, exaggeration means to push the movements further \u2028than what would be natural. It can emphasize the weight of an object or just give it more personality.<\/p>\r\n\r\n\r\n\r\n<p><strong>9\/ Secondary or Layered Animation<\/strong><br \/>Secondary animation refers to the principle that there can be more than one moving element to a character or shape as \u2028in the previous examples. Another way to think about this is as layered animation \u2014 adding additional movement on top of \u2028an existing one.<\/p>\r\n\r\n\r\n\r\n<p><strong>10\/ Appeal<\/strong><br \/>Appeal is the life of your animation. It\u2019s a combination of some or all of the preceding principles that will give an animation that feeling of \u201cWow that feels good!\u201d And one of the main things of appeal it relationship between animation and design.<\/p>\r\n<hr \/>\r\n<p><iframe loading=\"lazy\" title=\"10 Motion Design Principles Every Animator Needs\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Cz-GcIITNrs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\r\n","protected":false},"excerpt":{"rendered":"<p>1\/ Timing, Spacing and RhythmTiming means the number of frames between A and B; between keyframes. Spacing refers to how those frames are placed. Closer together and the speed is slower, farther apart the the speed is faster. Rhythm is&hellip; <a href=\"https:\/\/kscgd.com\/2026spring\/466\/resources\/10-principles-of-animation\/\" class=\"more-link\">Continue Reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":10363,"parent":6016,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10362","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/kscgd.com\/2026spring\/466\/wp-json\/wp\/v2\/pages\/10362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kscgd.com\/2026spring\/466\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kscgd.com\/2026spring\/466\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kscgd.com\/2026spring\/466\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kscgd.com\/2026spring\/466\/wp-json\/wp\/v2\/comments?post=10362"}],"version-history":[{"count":7,"href":"https:\/\/kscgd.com\/2026spring\/466\/wp-json\/wp\/v2\/pages\/10362\/revisions"}],"predecessor-version":[{"id":12368,"href":"https:\/\/kscgd.com\/2026spring\/466\/wp-json\/wp\/v2\/pages\/10362\/revisions\/12368"}],"up":[{"embeddable":true,"href":"https:\/\/kscgd.com\/2026spring\/466\/wp-json\/wp\/v2\/pages\/6016"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kscgd.com\/2026spring\/466\/wp-json\/wp\/v2\/media\/10363"}],"wp:attachment":[{"href":"https:\/\/kscgd.com\/2026spring\/466\/wp-json\/wp\/v2\/media?parent=10362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}