{"id":5675,"date":"2019-06-19T11:11:01","date_gmt":"2019-06-19T11:11:01","guid":{"rendered":"https:\/\/www.branex.ae\/blog\/?p=5675"},"modified":"2019-06-19T11:42:08","modified_gmt":"2019-06-19T11:42:08","slug":"master-the-12-principles-of-animation","status":"publish","type":"post","link":"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/","title":{"rendered":"12 Principles of Animation From Disney That Every Designer Should Live By"},"content":{"rendered":"<p>Have you ever wondered how animators make characters come to life? How do they get us to sympathize with Carl, laugh at Pascal, and understand the longing of Ariel wanting to be a part of your world? How do they make us gasp, skip a beat, jump in joy, or feel a heart-wrenching pain? How do they make us believe that the things they\u2019ve rendered are actually alive?<\/p>\n<p>Disney animators Ollie Johnston and Frank Thomas authored a book titled, \u201c<strong>The Illusion of Life: Disney Animation<\/strong>\u201d in 1981. They deeply scrutinized the work of famous Disney animators from 1930 to 1980 and extracted 12 principles of animation. In this article, you will learn about those 12 rules of animation that every <a href=\"https:\/\/www.branex.ae\/video-animation\/\">animation designer<\/a> should follow religiously.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#1_Squash_and_Stretch\" title=\"1.\u00a0 Squash and Stretch\">1.\u00a0 Squash and Stretch<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#2_Anticipation\" title=\"2.\u00a0 Anticipation\">2.\u00a0 Anticipation<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#Related_Read_Smart_Ways_to_Add_Animations_to_Your_Next_Mobile_App\" title=\"Related Read: Smart Ways to Add Animations to Your Next Mobile App\">Related Read: Smart Ways to Add Animations to Your Next Mobile App<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#3_Arc\" title=\"3.\u00a0 Arc\">3.\u00a0 Arc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#4_Staging\" title=\"4.\u00a0 Staging\">4.\u00a0 Staging<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#5_Follow_Through\" title=\"5.\u00a0 Follow Through\">5.\u00a0 Follow Through<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#Read_More_7_Eye-Catching_Motion_Graphic_Trends_%E2%80%93_InfoGIFs\" title=\"Read More: 7 Eye-Catching Motion Graphic Trends &#8211; InfoGIFs\">Read More: 7 Eye-Catching Motion Graphic Trends &#8211; InfoGIFs<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#6_Pose_to_Pose\" title=\"6.\u00a0 Pose to Pose\">6.\u00a0 Pose to Pose<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#7_Secondary_Action\" title=\"7.\u00a0 Secondary Action\">7.\u00a0 Secondary Action<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#8_Timing\" title=\"8.\u00a0 Timing\">8.\u00a0 Timing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#9_Appeal\" title=\"9.\u00a0 Appeal\">9.\u00a0 Appeal<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#10_Solid_Drawing\" title=\"10.\u00a0 Solid Drawing\">10.\u00a0 Solid Drawing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#11_Slow_In_and_Slow_Out\" title=\"11.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Slow In and Slow Out\">11.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Slow In and Slow Out<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.branex.ae\/blog\/master-the-12-principles-of-animation\/#12_Exaggeration\" title=\"12.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Exaggeration\">12.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Exaggeration<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_Squash_and_Stretch\"><\/span>1.\u00a0 Squash and Stretch<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div id=\"attachment_5676\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5676\" class=\"wp-image-5676 size-full\" title=\"12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif.gif\" alt=\"\" width=\"600\" height=\"277\" \/><p id=\"caption-attachment-5676\" class=\"wp-caption-text\">GIF Courtesy: https:\/\/gfycat.com<\/p><\/div>\n<p>One of the most important animation principles is squash and stretch. If you want to make your animations stand out, incorporate more character, or give an illusion of gravity, mass or flexibility, this animation principle should be your go-to guide. Make sure that you keep the object volume consistent when using this principle. When you squash an object, it becomes wider. Similarly, when you stretch an object, it thins out. You should keep that in mind when using this principle.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Anticipation\"><\/span>2.\u00a0 Anticipation<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5677 size-full\" title=\"12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-1.gif\" alt=\"\" width=\"600\" height=\"277\" \/><\/p>\n<p>Imagine visiting a website that lacks a call to action. You would be left in a conundrum, wondering what to do next. The same happens with animations. This is where anticipation principles come in handy. It will give your website visitors an idea about what will happen next, so they are prepared for it. Another advantage of using this principle is that it makes your object movement appear more realistic.<\/p>\n<h4 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"Related_Read_Smart_Ways_to_Add_Animations_to_Your_Next_Mobile_App\"><\/span><strong>Related Read: <a href=\"https:\/\/www.branex.ae\/blog\/smart-ways-to-add-animations-to-your-next-mobile-app\/\"><span style=\"color: #f20f0f;\">Smart Ways to Add Animations to Your Next Mobile App<\/span><\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h2><span class=\"ez-toc-section\" id=\"3_Arc\"><\/span>3.\u00a0 Arc<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5687 size-full\" title=\"12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-11.gif\" alt=\"\" width=\"600\" height=\"278\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>As an animation artist, you cannot afford to break the laws of physics. As science has it, when an object moves, it follows a path or an arc. If you are creating an animation where you are moving an object, you should ensure that it is in a path or arc to make sure that the movement looks natural instead of artificial.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_Staging\"><\/span>4.\u00a0 Staging<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5678 size-full\" title=\"12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-2.gif\" alt=\"\" width=\"600\" height=\"277\" \/><\/p>\n<p>Animation designers work hard to grab the attention of users, but very few succeed because they don\u2019t follow this animation principle. It attracts the viewer&#8217;s attention to the most important part of animation and keeps it thereby making the less important elements static. Most <a href=\"https:\/\/www.branex.ae\/mobile-app-development\/\"><strong><span style=\"color: #eb1313;\">Mobile app development companies in Dubai<\/span><\/strong><\/a> leverage this principle to hook app users to mobile apps.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_Follow_Through\"><\/span>5.\u00a0 Follow Through<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5679 size-full\" title=\"disney 12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-3.gif\" alt=\"\" width=\"600\" height=\"277\" \/><\/p>\n<p>When an object moves, all its components move at a different speed, thus leaving a trail behind. For instance, if an animated character is running, you might have noticed how their hands and legs move at two different paces. Similarly, as soon as the cartoon character comes in a static state, you will see their hair still moving for a fraction of a second. Animation designer who prioritizes realism in their animation should follow this principle.<\/p>\n<h4 style=\"text-align: center;\"><span class=\"ez-toc-section\" id=\"Read_More_7_Eye-Catching_Motion_Graphic_Trends_%E2%80%93_InfoGIFs\"><\/span><strong>Read More: <a href=\"https:\/\/www.branex.ae\/blog\/infographics\/motion-graphic-trends-for-2018\/\"><span style=\"color: #f20f0f;\">7 Eye-Catching Motion Graphic Trends &#8211; InfoGIFs<\/span><\/a><\/strong><span class=\"ez-toc-section-end\"><\/span><\/h4>\n<h2><span class=\"ez-toc-section\" id=\"6_Pose_to_Pose\"><\/span>6.\u00a0 Pose to Pose<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5680 size-full\" title=\"disney 12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-4.gif\" alt=\"\" width=\"600\" height=\"278\" \/><\/p>\n<p>There are two different ways to draw animation. One is straight ahead and the second is pose-to-pose. Unlike straight ahead, the animation designer draws the first frame, the last frame, and a few frames in between and then fill in the details. If you want more control over your animation scenes, this principle is for you. Add more dramatic effects to your animations by following this principle.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"7_Secondary_Action\"><\/span>7.\u00a0 Secondary Action<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5681 size-full\" title=\"disney 12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-5.gif\" alt=\"\" width=\"600\" height=\"278\" \/><\/p>\n<p>If you have two events taking place in an animation simultaneously, the secondary action might be a better bet. It highlights the main object without completely eliminating the secondary one. In fact, it plays an important part in adding more character to your objects. It keeps the main object in focus and puts the secondary object in the background. It is one of the best ways to handle two concurrent movements in a single animation.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"8_Timing\"><\/span>8.\u00a0 Timing<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5682 size-full\" title=\"disney 12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-6.gif\" alt=\"\" width=\"600\" height=\"277\" \/><\/p>\n<p>Another animation principle that relies heavily on the laws of physics is timing. It puts time at the forefront and enables animation designers to control the mood and movements of different characters. If you are using this principle in your animations, make sure you use it consistently. Any inconsistent behavior can ruin the entire animation.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"9_Appeal\"><\/span>9.\u00a0 Appeal<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5683 size-full\" title=\"disney 12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-7.gif\" alt=\"\" width=\"600\" height=\"278\" \/><\/p>\n<p>Who will see your animation? Users, right. You want to impress your users, but it won\u2019t be possible if you don\u2019t make your animations attractive to them. This is where the animation appeal principle comes into play. It makes sure that your objects and the world surrounding them, catch the eyes of your target audience. Appeal principle achieves this by solid drawing, easy-on-the-eyes design and adding more personality to objects and characters. Channel all your energies towards character development and tell a story that your users will love.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"10_Solid_Drawing\"><\/span>10.\u00a0 Solid Drawing<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5684 size-full\" title=\"12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-8.gif\" alt=\"\" width=\"600\" height=\"278\" \/><\/p>\n<p>A good animation designer is great at drawing and if you want to become a great animation designer, you will have to hone your drawing skills. Paying attention to details such as shadows, light, volume, and anatomy as well as understanding 3D drawing is critical to success. Yes, you can use your creativity but make sure you stay consistent throughout the animation.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"11_Slow_In_and_Slow_Out\"><\/span>11.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Slow In and Slow Out<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5685 size-full\" title=\"disney 12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-9.gif\" alt=\"\" width=\"600\" height=\"278\" \/><\/p>\n<p>Have you ever seen a car start up and stop? If you have, then you can easily get your head around slow-in and slow-out principle. A car starts slowly and accelerates in time before reaching its top speed. On the flip side, when the car brakes are applied, the car slows down, decelerates and screeches to a halt. You can slow-in and slow-out an animation by including additional frames at the beginning and at the end of a fast-paced action scene or animation and breathe life into objects.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"12_Exaggeration\"><\/span>12.\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0Exaggeration<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-5686 size-full\" title=\"disney 12 principles of animation\" src=\"https:\/\/www.branex.ae\/blog\/wp-content\/uploads\/2019\/06\/ezgif.com-video-to-gif-10.gif\" alt=\"\" width=\"600\" height=\"278\" \/><\/p>\n<p>There are instances when striving for too much realism in your animation can backfire on you. It can make your animation look boring and run-of-the-mill. Add an element of surprise by using the exaggeration animation principle. This will give your objects and character an extra pop, which can immediately grab the attention of viewers and provide them with the eye candy they were anticipating from your web animation.<\/p>\n<p>Which animation principles do you follow when designing animations? Feel free to share it with us in the comments section below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Have you ever wondered how animators make characters come to life? How do they get us to sympathize with Carl, laugh at Pascal, and understand the&#8230;<\/p>\n","protected":false},"author":7,"featured_media":5688,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[435],"tags":[],"_links":{"self":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/posts\/5675"}],"collection":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/comments?post=5675"}],"version-history":[{"count":0,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/posts\/5675\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/media\/5688"}],"wp:attachment":[{"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/media?parent=5675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/categories?post=5675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.branex.ae\/blog\/wp-json\/wp\/v2\/tags?post=5675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}