Principles of Animation Influenced by Disney 😸
Courtesy of @bazen.agency
We all watched and admired Disney cartoons, right? The animation was the part of that and here are what we can learn from it and apply it in UIs.
Btw, one short animation history flashback.
The laws of animation physics we owe to Frank Thomas and Ollie Johnston. Working for the Walt Disney Company in its heyday of the 1930s, these two animators came up with the 12 basic principles of animation, each of which can be used to produce the illusion of characters moving realistically in a cartoon.
Animation and content credits goes to @centolodigiani
01: Squash &Strech
Squash and Stretch (S8/S for short) is the principle of applying a contrasting change of shape—from a squash pose to a stretch pose or vice versa—to give a feeling of fleshiness, flexibility, and life in animation. The absence of squash and stretch gives a rigidity or stiffness to the motion.
Anticipation is the preparation for an action such as a jump or a punch. For example, a character will squat down before pushing his body and legs up into a jump. The stronger the anticipation motion, the more cartoony and fluid the animation will be. The smaller the anticipation, the more stiff the animation will be.
03:Follow Through & Overlap
Follow Through and Overlapping Action refers to two closely related techniques that help to render movement more realistically and help to give the impression that characters follow the laws of physics, including the principle of inertia.
Staging is the presentation of an idea so that it is clear. This id..n be an action, a personality, an expression, or a mood. The key idea is that the idea is made clear to the viewer
Such arcs are used extensively in animation, since., create mot. that is more expressive and less stiff than action along a straight path. In Computer Animation, mot. is usually represented in a timeline view using splines(arcs).
Exaggeration is used in animation for visual effects. An action becomes a lot more interesting with exaggeration to make ff look more extreme and surreal. Ft is the oppos. of realism we were to animation a perfect imitation; it could bok static and dull.
Bonus — 4 tools that may be useful in your designer way:
Flowkit — allows designers to create frighteningly fast user flows within Sketch and Figma.
Webflow — all-in-one web design tool that allows users to design, build, and launch responsive websites visually.
Crello — the simplest online image editor. A simple but powerful tool to create awesome designs for any social media format — posts, covers, graphics, and posters using the best software on the web. It’s easy! A lot of animated designs.
Funnelytics — an incredible tool that helps you build the best marketing funnel mapping.