{
"componentChunkName": "component---src-pages-animation-tips-and-techniques-mdx",
"path": "/animation/tips-and-techniques/",
"result": {"pageContext":{"frontmatter":{"title":"Tips and techniques","description":"Every animation—from simple linework pictograms through expansive, high-fidelity 3D—requires a different approach and new solutions. However, the following guidance is universally applicable to every execution."},"relativePagePath":"/animation/tips-and-techniques.mdx","titleType":"append","MdxNode":{"id":"f9ea437e-bf3d-50b8-b340-b87e5b88b6dd","children":[],"parent":"51efe65f-b0bf-5358-8093-c0b226e48917","internal":{"content":"---\ntitle: Tips and techniques\ndescription:\n Every animation—from simple linework pictograms through expansive,\n high-fidelity 3D—requires a different approach and new solutions. However, the\n following guidance is universally applicable to every execution.\n---\n\nimport LottiePlayer from '../../components/LottiePlayer';\n\n\n\nimport animation_tt_ex2 from './videos/animation-tt-ex2.gif';\n\n\n\nEvery animation—from simple linework pictograms through expansive, high-fidelity\n3D—requires a different approach and new solutions. However, the following\nguidance is universally applicable to every execution.\n\n\n\n\n Examples\n Attention\n Visual clarity\n Personality\n Physicality\n Structure\n\n\n## Examples\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\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n## Attention\n\nMotion is exceptionally useful in capturing attention. How we use motion to\ndirect that attention is essential in effectively communicating with the viewer.\n\n### Focus\n\nMaintain a focal point of interest and seek out a seamless means of transferring\nit from one subject to the next. A viewer’s attention is an investment. With the\nbrief and dense nature of most animation, be cognizant of how you capture and\nshift a viewer's focus to minimize confusion and fatigue.\n\n\n\n\n\n\n\n\n\n\n\n\n A commanding performance begins this sequence that leads the eye from right to\n left.\n\n\n\n
\n\n### Camera\n\nCameras are the mechanism through which we present our view of the world to an\nobserver and, therefore, must be treated with the utmost care to maintain an\nattitude of confidence and positivity.\n\nEfficient, single-axis translations feel deliberate and unobtrusive, while\nuntethered, dynamic moves impart a sense of chaos and uncertainty. If creating a\ndynamically animated camera is absolutely necessary, ensure its movement remains\ncontrolled, clearly focused and positioned to create balanced compositions.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Visual clarity\n\nOur animations should be simple and straightforward in their effect by not only\nrespecting the integrity of their original design but also by enhancing and\nevolving it.\n\n### Complexity\n\nEvery element in a composition has the potential for movement, but every\nmovement of an element increases the density of information presented to a\nviewer. This dynamic intuitively leads us to apply an inverse relationship\nbetween the complexity of a design and the complexity of an animation. In\ngeneral, minimally populated compositions lend themselves to more expressive and\nexpansive animation, while dense and complex designs benefit from smaller, more\ntextural motion.\n\n\n\n\n\n\n\n\n\n\n\nDetailed visuals call for subtle animations.\n\n\n\n\n\n\n\n\n\n\n\nSimple designs allow for dynamic animation.\n\n\n
\n\n### Detail\n\nIn animation, the accuracy of a form in any key pose should adhere to the same\nrigorous standards used in creating the design. During transitions from one key\nto another, strive to maintain clean and precise silhouettes by avoiding odd\nshapes, irregular angles, overlaps and intersections, unless explicitly desired\nas an effect.\n\nA similar level of attention should be paid to the briefest of moments. For\nexample, avoid creating irregularities during the overlap of transparent shapes\nby animating between swatch colors, not opacity. Maintain crisp graphic lines by\nincreasing the stroke weight from zero to the thickness, not crossfading.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Consistency\n\nAnimate with a consistency of motion both systematically and specifically.\n\nMaking broad, consistent choices defines a framework for how we present\ninformation and make it understood, especially in more technical scenarios.\nSeemingly inconsequential distinctions, like which direction elements move in\nand out of frame or how crossfades and type behave, are foundational to creating\na sense of reason and purpose.\n\nIn more illustrative scenarios, consistency can help demonstrate the role and\nfunction of abstract elements or define a baseline of behavior against which\nabrupt changes and influences become more noticeable. Setting expectations and,\nin some cases, subverting them is an excellent way to convey novel cause and\neffect, and imbue even simple forms with personality.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Personality\n\nOur animations should always seek a balance between natural and engineered in\ntone and behavior. Unless essential to the story, nothing should feel coldly\nmechanical or overtly organic—it’s both working in cooperation that imparts a\nsubtle, yet appreciable, personality.\n\n### Precision\n\nElements move decisively, efficiently and with purpose. Align to the grid. Snap\ninto place. Use momentum to instigate crisp transitions. While no single detail\nwill be immediately noticeable, this precision and attention to detail is\npalpable and felt when applied holistically.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Rhythm\n\nEstablishing a sense of rhythm in motion is essential to well-paced and\nunderstandable animations–rarely does everything happen at once. No matter which\ntactic you use to choreograph action into sequences, they all contribute to an\nebb and flow of activity that creates a pleasing rhythm and allows the viewer a\nmental pause before continuing. Tactics can include translating objects along\nalready defined paths with slightly offset timings, showing deliberate moments\nof cause and effect or allowing elements to move purposefully and then rest.\n\n\n\n\n\n\n\n\n\n\n\nAchieve effective rhythm with staggered hero performances.\n\n\n\n\n\n\n\n\n\n\n\n\n Offsetting similar actions by small increments can be effective.\n\n\n\n
\n\n### Fluidity\n\nA well-animated object should feel effortless and elegant, with a fluidity to\nits motion—not in the path it takes, but the finesse with which it moves. Pay\nclose attention to how each attribute is animated and the transition between\nmovements.\n\nIn general, refrain from employing stepped, stilted or disorderly motion.\nTechnically, motion requires animating at or above 24 frames per second (FPS) to\nhelp ensure smooth 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## Physicality\n\nWhen applied selectively, animation that feels physical is an incredibly\neffective means of adding interest and personality to your designs, whether\nthey’re overtly dimensional or recognizable elements, or simple graphic shapes.\n\n### Mass and momentum\n\nCharm and spirit can be produced through collisions, moments of friction and\nslides. However, be deliberate and considered when moving elements—avoid\ncartoonish overshoots and bounces.\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Volume\n\nConsider what the element to be animated represents, especially in\nhigher-fidelity and dimensional executions. Intuitively, viewers expect things\nto behave as they do in reality; feathers shouldn’t fall like lead, stone\nshouldn’t stretch like rubber. Treating recognizable objects with a sense of\nstylized realism can be an effective way to create interest.\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## Structure\n\nAnimated illustrations inevitably fall into one of two categories—sequential or\nlooped. Although a technical specification, this distinction also helps to\ndefine how a message is structured.\n\n### Sequential\n\nSequential animations are intended to depict a sequence of events with\ndeliberate start points and endpoints—an A to B narrative. Whether they then\nsettle into a loop state or reset to begin again, sequential animations are\ntypically more anecdotal and linear in their message than loops.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSequential movement leads a viewer along a prescribed path.\n\n\n
\n\n### Simple loops\n\nLoops continue in a usually seamless cycle and often only convey a singular idea\nor message. The loop may be a series of states aligned to one topic or an\noverall ambient effect that draws focus and sets a particular tone.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nUse simple loops to convey individual concepts.\n\n\n
\n\n### Nested loops\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\n\nType is an essential component of our communications. Accordingly, care must be\ntaken in animation to present type in a manner that's natural and understandable\nto our viewers.\n\n### Presentation\n\nWhether revealing a block of type as a whole or animating individual\nelements—line by line, word by word, even character by character—our approach to\ntype should reinforce the natural rhythm of reading, typically by appearing left\nto right, top to bottom. And, as with graphic elements, type should only be\nanimated on one axis at a time, and be left in the frame long enough to be\nlegible and comprehensible to the viewer.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Integrity\n\nThe IBM Plex® typeface is designed to be a representation of our brand, where\nevery detail reflects a decision made with purpose. As such, the integrity of\nany typographic element must be maintained at all times. Refrain from\nstretching, warping, or otherwise distorting any form or detail, regardless\nwhether it’s a single glyph or an entire paragraph.\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":"75927a537a9c7ebf3da90f2d69e18d01","owner":"gatsby-plugin-mdx","counter":1906},"frontmatter":{"title":"Tips and techniques","description":"Every animation—from simple linework pictograms through expansive, high-fidelity 3D—requires a different approach and new solutions. However, the following guidance is universally applicable to every execution."},"exports":{},"rawBody":"---\ntitle: Tips and techniques\ndescription:\n Every animation—from simple linework pictograms through expansive,\n high-fidelity 3D—requires a different approach and new solutions. However, the\n following guidance is universally applicable to every execution.\n---\n\nimport LottiePlayer from '../../components/LottiePlayer';\n\n\n\nimport animation_tt_ex2 from './videos/animation-tt-ex2.gif';\n\n\n\nEvery animation—from simple linework pictograms through expansive, high-fidelity\n3D—requires a different approach and new solutions. However, the following\nguidance is universally applicable to every execution.\n\n\n\n\n Examples\n Attention\n Visual clarity\n Personality\n Physicality\n Structure\n\n\n## Examples\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\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\n## Attention\n\nMotion is exceptionally useful in capturing attention. How we use motion to\ndirect that attention is essential in effectively communicating with the viewer.\n\n### Focus\n\nMaintain a focal point of interest and seek out a seamless means of transferring\nit from one subject to the next. A viewer’s attention is an investment. With the\nbrief and dense nature of most animation, be cognizant of how you capture and\nshift a viewer's focus to minimize confusion and fatigue.\n\n\n\n\n\n\n\n\n\n\n\n\n A commanding performance begins this sequence that leads the eye from right to\n left.\n\n\n\n
\n\n### Camera\n\nCameras are the mechanism through which we present our view of the world to an\nobserver and, therefore, must be treated with the utmost care to maintain an\nattitude of confidence and positivity.\n\nEfficient, single-axis translations feel deliberate and unobtrusive, while\nuntethered, dynamic moves impart a sense of chaos and uncertainty. If creating a\ndynamically animated camera is absolutely necessary, ensure its movement remains\ncontrolled, clearly focused and positioned to create balanced compositions.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Visual clarity\n\nOur animations should be simple and straightforward in their effect by not only\nrespecting the integrity of their original design but also by enhancing and\nevolving it.\n\n### Complexity\n\nEvery element in a composition has the potential for movement, but every\nmovement of an element increases the density of information presented to a\nviewer. This dynamic intuitively leads us to apply an inverse relationship\nbetween the complexity of a design and the complexity of an animation. In\ngeneral, minimally populated compositions lend themselves to more expressive and\nexpansive animation, while dense and complex designs benefit from smaller, more\ntextural motion.\n\n\n\n\n\n\n\n\n\n\n\nDetailed visuals call for subtle animations.\n\n\n\n\n\n\n\n\n\n\n\nSimple designs allow for dynamic animation.\n\n\n
\n\n### Detail\n\nIn animation, the accuracy of a form in any key pose should adhere to the same\nrigorous standards used in creating the design. During transitions from one key\nto another, strive to maintain clean and precise silhouettes by avoiding odd\nshapes, irregular angles, overlaps and intersections, unless explicitly desired\nas an effect.\n\nA similar level of attention should be paid to the briefest of moments. For\nexample, avoid creating irregularities during the overlap of transparent shapes\nby animating between swatch colors, not opacity. Maintain crisp graphic lines by\nincreasing the stroke weight from zero to the thickness, not crossfading.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Consistency\n\nAnimate with a consistency of motion both systematically and specifically.\n\nMaking broad, consistent choices defines a framework for how we present\ninformation and make it understood, especially in more technical scenarios.\nSeemingly inconsequential distinctions, like which direction elements move in\nand out of frame or how crossfades and type behave, are foundational to creating\na sense of reason and purpose.\n\nIn more illustrative scenarios, consistency can help demonstrate the role and\nfunction of abstract elements or define a baseline of behavior against which\nabrupt changes and influences become more noticeable. Setting expectations and,\nin some cases, subverting them is an excellent way to convey novel cause and\neffect, and imbue even simple forms with personality.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## Personality\n\nOur animations should always seek a balance between natural and engineered in\ntone and behavior. Unless essential to the story, nothing should feel coldly\nmechanical or overtly organic—it’s both working in cooperation that imparts a\nsubtle, yet appreciable, personality.\n\n### Precision\n\nElements move decisively, efficiently and with purpose. Align to the grid. Snap\ninto place. Use momentum to instigate crisp transitions. While no single detail\nwill be immediately noticeable, this precision and attention to detail is\npalpable and felt when applied holistically.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Rhythm\n\nEstablishing a sense of rhythm in motion is essential to well-paced and\nunderstandable animations–rarely does everything happen at once. No matter which\ntactic you use to choreograph action into sequences, they all contribute to an\nebb and flow of activity that creates a pleasing rhythm and allows the viewer a\nmental pause before continuing. Tactics can include translating objects along\nalready defined paths with slightly offset timings, showing deliberate moments\nof cause and effect or allowing elements to move purposefully and then rest.\n\n\n\n\n\n\n\n\n\n\n\nAchieve effective rhythm with staggered hero performances.\n\n\n\n\n\n\n\n\n\n\n\n\n Offsetting similar actions by small increments can be effective.\n\n\n\n
\n\n### Fluidity\n\nA well-animated object should feel effortless and elegant, with a fluidity to\nits motion—not in the path it takes, but the finesse with which it moves. Pay\nclose attention to how each attribute is animated and the transition between\nmovements.\n\nIn general, refrain from employing stepped, stilted or disorderly motion.\nTechnically, motion requires animating at or above 24 frames per second (FPS) to\nhelp ensure smooth 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## Physicality\n\nWhen applied selectively, animation that feels physical is an incredibly\neffective means of adding interest and personality to your designs, whether\nthey’re overtly dimensional or recognizable elements, or simple graphic shapes.\n\n### Mass and momentum\n\nCharm and spirit can be produced through collisions, moments of friction and\nslides. However, be deliberate and considered when moving elements—avoid\ncartoonish overshoots and bounces.\n\n\n\n\n\n\n\n\n\n\n\n
\n\n### Volume\n\nConsider what the element to be animated represents, especially in\nhigher-fidelity and dimensional executions. Intuitively, viewers expect things\nto behave as they do in reality; feathers shouldn’t fall like lead, stone\nshouldn’t stretch like rubber. Treating recognizable objects with a sense of\nstylized realism can be an effective way to create interest.\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## Structure\n\nAnimated illustrations inevitably fall into one of two categories—sequential or\nlooped. Although a technical specification, this distinction also helps to\ndefine how a message is structured.\n\n### Sequential\n\nSequential animations are intended to depict a sequence of events with\ndeliberate start points and endpoints—an A to B narrative. Whether they then\nsettle into a loop state or reset to begin again, sequential animations are\ntypically more anecdotal and linear in their message than loops.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nSequential movement leads a viewer along a prescribed path.\n\n\n
\n\n### Simple loops\n\nLoops continue in a usually seamless cycle and often only convey a singular idea\nor message. The loop may be a series of states aligned to one topic or an\noverall ambient effect that draws focus and sets a particular tone.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nUse simple loops to convey individual concepts.\n\n\n
\n\n### Nested loops\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\n\nType is an essential component of our communications. Accordingly, care must be\ntaken in animation to present type in a manner that's natural and understandable\nto our viewers.\n\n### Presentation\n\nWhether revealing a block of type as a whole or animating individual\nelements—line by line, word by word, even character by character—our approach to\ntype should reinforce the natural rhythm of reading, typically by appearing left\nto right, top to bottom. And, as with graphic elements, type should only be\nanimated on one axis at a time, and be left in the frame long enough to be\nlegible and comprehensible to the viewer.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n### Integrity\n\nThe IBM Plex® typeface is designed to be a representation of our brand, where\nevery detail reflects a decision made with purpose. As such, the integrity of\nany typographic element must be maintained at all times. Refrain from\nstretching, warping, or otherwise distorting any form or detail, regardless\nwhether it’s a single glyph or an entire paragraph.\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/tips-and-techniques.mdx"}}},
"staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}