{
"componentChunkName": "component---src-pages-animation-classic-principles-mdx",
"path": "/animation/classic-principles/",
"result": {"pageContext":{"frontmatter":{"title":"Classic principles","description":"Most animators are familiar with the 12 basic principles of animation. Although these principles originally applied to character animation, our unique interpretation of each one makes it decidedly relevant when applying motion to graphic forms."},"relativePagePath":"/animation/classic-principles.mdx","titleType":"append","MdxNode":{"id":"4ee10f42-8cea-5063-bbbd-5768bfdaa370","children":[],"parent":"204cd832-6826-5211-9b48-2696db420309","internal":{"content":"---\ntitle: Classic principles\ndescription:\n Most animators are familiar with the 12 basic principles of animation.\n Although these principles originally applied to character animation, our\n unique interpretation of each one makes it decidedly relevant when applying\n motion to graphic forms.\n---\n\nimport LottiePlayer from '../../components/LottiePlayer';\n\n\n\nMost animators are familiar with the\n[12 basic principles of animation](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation).\nAlthough these principles originally applied to character animation, our unique\ninterpretation of each one makes it decidedly relevant when applying motion to\ngraphic forms.\n\n\n\n## Classic animation principles\n\n### Squash and stretch\n\nEmbrace acceleration and reaction but refrain from overt stretchiness and\ndeformations. Aim for precision and accuracy, not cartoonish playfulness.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Anticipation\n\nUse elements under acceleration and deceleration to instigate instant changes\nand indicate significance.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Staging\n\nLead the eye. Forego unnecessarily complex or busy compositions and backgrounds\nthat may detract from meaningful details. Direct attention to what’s most\nimportant by leaning on elements animated in sequence and refraining from\ncompeting actions.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Pose to pose\n\nBe efficient; create as few key poses as possible while striving to create\ncompelling performances.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Overlapping action\n\nSecondary elements that inherit the motion of a parent on a slight delay can\ncreate visual interest and emphasis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Slow in and slow out\n\nObjects should behave according to their material and design but will typically\nspeed up quickly and slow down smoothly. Animation curves that suggest bounce,\nstretch or abrupt stops aren’t recommended.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Arc\n\nIn contrast to this original principle and its advice on creating organic\nmovements, our projection of purpose and seamless organization can be emphasized\nin motion by translating elements on one axis at a time, with a slight overlap\nbetween each one.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Secondary action\n\nIf necessary, secondary action should be introduced to enhance, or be in\nresponse to, the main action, not distract from it.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Timing\n\nBe decisive in getting from point A to point B. Avoid long exponential eases as\nelements settle into place.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Exaggeration\n\nExaggeration isn’t employing decoration to create visual interest. Instead,\nanimate elements in a manner that clearly demonstrates function and purpose.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Solid drawing\n\nBe sure to portray an appropriate sense of weight and momentum, especially when\ndepicting recognizable forms or objects with volume and dimension.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Appeal\n\nLook for opportunities to create moments of compelling—yet considered—surprise\nand delight when applying motion to designs.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n","type":"Mdx","contentDigest":"37139faa6f2c50df19f346ca7b790799","owner":"gatsby-plugin-mdx","counter":1904},"frontmatter":{"title":"Classic principles","description":"Most animators are familiar with the 12 basic principles of animation. Although these principles originally applied to character animation, our unique interpretation of each one makes it decidedly relevant when applying motion to graphic forms."},"exports":{},"rawBody":"---\ntitle: Classic principles\ndescription:\n Most animators are familiar with the 12 basic principles of animation.\n Although these principles originally applied to character animation, our\n unique interpretation of each one makes it decidedly relevant when applying\n motion to graphic forms.\n---\n\nimport LottiePlayer from '../../components/LottiePlayer';\n\n\n\nMost animators are familiar with the\n[12 basic principles of animation](https://en.wikipedia.org/wiki/Twelve_basic_principles_of_animation).\nAlthough these principles originally applied to character animation, our unique\ninterpretation of each one makes it decidedly relevant when applying motion to\ngraphic forms.\n\n\n\n## Classic animation principles\n\n### Squash and stretch\n\nEmbrace acceleration and reaction but refrain from overt stretchiness and\ndeformations. Aim for precision and accuracy, not cartoonish playfulness.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Anticipation\n\nUse elements under acceleration and deceleration to instigate instant changes\nand indicate significance.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Staging\n\nLead the eye. Forego unnecessarily complex or busy compositions and backgrounds\nthat may detract from meaningful details. Direct attention to what’s most\nimportant by leaning on elements animated in sequence and refraining from\ncompeting actions.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Pose to pose\n\nBe efficient; create as few key poses as possible while striving to create\ncompelling performances.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Overlapping action\n\nSecondary elements that inherit the motion of a parent on a slight delay can\ncreate visual interest and emphasis.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Slow in and slow out\n\nObjects should behave according to their material and design but will typically\nspeed up quickly and slow down smoothly. Animation curves that suggest bounce,\nstretch or abrupt stops aren’t recommended.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Arc\n\nIn contrast to this original principle and its advice on creating organic\nmovements, our projection of purpose and seamless organization can be emphasized\nin motion by translating elements on one axis at a time, with a slight overlap\nbetween each one.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Secondary action\n\nIf necessary, secondary action should be introduced to enhance, or be in\nresponse to, the main action, not distract from it.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Timing\n\nBe decisive in getting from point A to point B. Avoid long exponential eases as\nelements settle into place.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Exaggeration\n\nExaggeration isn’t employing decoration to create visual interest. Instead,\nanimate elements in a manner that clearly demonstrates function and purpose.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Solid drawing\n\nBe sure to portray an appropriate sense of weight and momentum, especially when\ndepicting recognizable forms or objects with volume and dimension.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Appeal\n\nLook for opportunities to create moments of compelling—yet considered—surprise\nand delight when applying motion to designs.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n","fileAbsolutePath":"/home/runner/work/design-language-website/design-language-website/src/pages/animation/classic-principles.mdx"}}},
"staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}