motion.ed the basics of easing offset and delay fade in fade out transformation/morph masking scale parallax zoom menu close UI/UX animation emphasizes the details to which users should pay attention, helping them navigate the site. GOOD ANIMATION ALSO MAKES THE WHOLE USER EXPERIENCE MORE MEMORABLE AND EXCITING. It also your controls attention UI/UX ANIMATION CAPTURES THE MOOD OF A BRAND OR PRODUCT AND CONVEYS IT TO A TARGET AUDIENCE Here, animation gives a pumping vibe to a fitness website. It can also take game apps to the next level... An architect's studio can convey its brand with a suite of complementary animation techniques. ANIMATION ENCOURAGES INTERACTION BY ENTICING USERS TO EXPLORE Animation lets us hint at how to use sliders and other navigation elements. Animation guides the eye from one key visual element to the next. Animation unpacks all the visual information that the user sees on the screen. INTERACTIVE There are two types of interactive interfaces: Real-time respond as users interact with them. Not real-time respond after the interaction has taken place. Real-time Not real-time INTERFACE ANIMATION TECHNIQUES Every interface animation draws from the same repertoire of techniques to make sites and apps more engaging. Many of these have their roots in the golden age of hand-drawn cartoons – but have been adapted for the digital era. 1 THE BASICS OF EASING In nature, the speed of movement is never linear: objects gain speed as they begin to move, and slow as they come to a halt. Easing is the technique that allows us to convey this. Linear Ease Ease-in Ease-out Cubic Here the object accelerates slightly at the beginning and decelerates slightly at the end LET'S LOOK AT AN EXAMPLE Missing easing & delay Correct easing Correct delay & animation IMPLEMENTATION EXAMPLES Ease-in/ease-out can also be applied to camera movements and transformation of interface objects. View Wonder at how smoothly our text content glides into view! View Here we see how the guide controls the appearance of content and the animation of icons and visuals. View An example from classic animation Slow in and slow out Think about how a car starts and stops. At first, it moves slowly before gaining momentum and speeding up. When the car brakes, the process reverses. In animation, this effect is achieved by adding more frames at the beginning and end of an action sequence. Applying this principle gives your objects more life. 2 OFFSET AND DELAY A slight delay between two or more objects creates a feeling of softness and multi-layered movement. This technique also helps to direct the user's attention, indicating an objects's place within a hierarchy of elements. IMPLEMENTATION EXAMPLES Here, content elements appear one by one, adding softness to the movement and creating the impression of viscosity. View Having the visual elements arrive one at a time gives each of them a chance to shine and makes the whole effect more engaging. View Here, once again, one-by-one appearance of content elements draws the viewer in. View An example from classic animation Follow through and overlapping action When objects come to a standstill after being in motion, different parts will stop at different speed. Similarly, not everything on an object will move at the same speed. This forms the essence of the fifth of Disney's principles of animation. If your character is running across the scene, their arms and legs may be moving at a different speed from their head. This is an overlapping action. Likewise, when they stop running, their hair will likely continue to move for a few frames before coming to rest – this is follow-through. These are essential principles to understand if you want your animation to flow realistically. View 3 FADE-IN FADE-OUT Fade-in, fade-out is the appearance and disappearance of an object via a transition from transparency to opacity. The most widespread and versatile technique for object appearance and disappearance, it works best in conjunction with other techniques, such as animation of position, scale, or (occasionally) form. Where several objects appear on a single screen, it is best also to add some delay. IMPLEMENTATION EXAMPLES Here we see text appearing under a mask before fading out and disappearing. View Here, a fade-in, fade-out animation of both opacity and position brings life to a text box. View To help distinguish adjacent elements we can animate one with both opacity and position, and the other solely with opacity. View 4 TRANSFORM & MORPH A technique for transforming one object (say, a round icon) into another (for example, a large square picture). This creates continuity and holds the viewer's attention on a key object from one screen to another – particularly effective for storytelling. IMPLEMENTATION EXAMPLES Here, the photo container smoothly changes its shape. View Here, two combinations of transformation and masking, as the small photo expands into the larger one. View Here, rectangles containing photos morph from irregular forms to regular forms. View 5 MASKING Similar to morph, masking lets us use the morphic object as a mask for photography. The photo in the mask can scale, move, or spin – creating a feeling of softness and spaciousness in movement. IMPLEMENTATION EXAMPLES Here, masking causes the photo to slightly shift within its container. The technique works well in tandem with transformation. View Here, once again, a photo gently shifts within its container. View Here the photos subtle scroll within their container. View 6 DIMENSION Of the various ways we can convey volume, the most popular is Floating Dimensionality. This technique makes interaction with objects intuitive and narrative, enriching the experience of using the site or application. IMPLEMENTATION EXAMPLES Here, an animation of a ship sailing away into the distance creates an illusion of space. Reinforcing this, the text follows in the ship's wake. View Here, the ability to leaf through a box of records is used to create a feeling of depth. View Here it's the ability to scroll left and right through your cards that creates a feeling of depth. View 7 PARALLAX Arranged in layers, several objects pass simultaneously through x and y axes: the farther the object, the less it passes. The result is a feeling of space. IMPLEMENTATION EXAMPLES As the matte translucent object with the chart and other information moves upwards, the cards underneath it subtly shift position. This 'parallax effect' supports the main 3D visualization. View A classic use of parallax sees an in-focus foreground move in relation to the out-of-focus scenery beyond – just like the view the runner sees. View In interactive parallax, movements of the mouse trigger slight displacement of objects on screen – a stylish finishing touch for a minimalistic design. View 8 ZOOM This technique brings continuity to narrative and lets us achieve a smooth transition between interface, objects, and destinations. Zoom also adds depth and informs users about additional content that is out of sight. IMPLEMENTATION EXAMPLES Zoom lets us communicate depth, lends continuity to narrative, and helps immerse the viewer in the site. View Here we get the feeling not of moving page to page, but of a smooth, continuous experience. View Here, we apply a camera span animation to show off a product from a variety of angles. View USEFUL COURSES &SOURCES YOU ARE ALWAYS A STUDENT, NEVER A MASTER COURSES 10 SOURCES 4 UX in Motion. Courses focused on UI animation in After Effect. View UI / UX animation. The course from the Ukrainian online instit View UI Animation. A Complete Guide For Beginners, a short guide to View Motion design school. Courses dedicated to different types of View UI Animations and Interactions with After Effects. An inexpens View Complete guide to Prototyping & UI Animations in Principle. Pr View Millionframes. Courses on both creating interfaces and prototy View Domestika. This platform has a large number of courses on 2D a View Ben Marriot. Course on animation in After Effects from the pop View School of Motion. A platform with a large number of courses on View Animation in UI: How to Create Motion Design. Guide to motion View How Motion Design Applies to UI Design. A short guide on how m View Understand Disney's 12 principles of animation. Classic animat View Creating Usability with Motion: The UX in Motion Manifesto. Ma View MOTION DESIGN PRINCIPLES N. Introduction Easing Delay Fade in Fade Out. Transform & Morph Masking Dimension Parallax Zoom Resources & Courses S. Dribbble Instagram Twitter linkedin Clutch Made by Zajno © 2024. All rights reserved.