Principles of Animation Influenced by Disney

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.

02: Anticipation

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.

04:Staging

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

05:Arcs

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).

06:Exaggeration

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.

Be free to send us any feedback by reply or reach us in DM on Instagram
Do you want to receive insights using FB Messenger or Telegram or Email? 👈 Subscribe now.