material1-duration-easing.txt

Motion – Duration & easing menu search close Search Material Design Introduction Environment Material properties Elevation & shadows What’s new Motion Material motion Duration & easing Movement Transforming material Choreography Creative customization Style Color Icons Imagery Typography Writing Layout Principles Units & measurements Metrics & keylines Structure Responsive UI Split screen Components Bottom navigation Bottom sheets Buttons Buttons: Floating Action Button Cards Chips Data tables Dialogs Dividers Expansion panels Grid lists Lists Lists: Controls Menus Pickers Progress & activity Selection controls Sliders Snackbars & toasts Steppers Subheaders Tabs Text fields Toolbars Tooltips Widgets Patterns Confirmation & acknowledgement Data formats Empty states Errors Fingerprint Gestures Help & feedback Launch screens Loading images Navigation Navigation drawer Navigational transitions Notifications Offline states Permissions Scrolling techniques Search Selection Settings Swipe to refresh Growth & communications Introduction Onboarding Feature discovery Gesture education Usability Accessibility Bidirectionality Platforms Platform adaptation Android Resources Color palettes Devices Layout templates Roboto & Noto fonts Sticker sheets & icons Shadows - Site feedback - Privacy - Terms Duration & easing Material in motion is responsive and natural. Use these easing curves and duration patterns to create smooth and consistent motion. Easing curves Standard curve Deceleration curve Acceleration curve Sharp curve Contents - Speed - Dynamic durations - Common durations - Natural easing curves Speed When elements move between positions or states, the movement should be fast enough that it doesn't cause waiting, but slow enough that the transition can be understood. Keep transitions short as users will see them frequently. Do. Animate quickly so that the user doesn’t have to wait for the animation to finish. Don’t. Don’t animate slowly as it creates unnecessary lag. Dynamic durations Rather than using a single duration for all animations, adjust each duration to accommodate the distance travelled, an element's velocity, and surface changes. Objects leaving the screen may have shorter durations, as they require less attention. Use longer durations when objects need to travel large distances or have dramatic changes in surface area. Use shorter durations when objects travel short distances or have minor changes in surface area, so that the movement doesn't appear too slow. Common durations Mobile Transitions on mobile typically occur over 300ms, within this margin of variance: - Large, complex, full-screen transitions may have longer durations, occurring over 375ms - Elements entering the screen occur over 225ms - Elements leaving the screen occur over 195ms Transitions that exceed 400ms may feel too slow. Larger screens Elements travelling longer distances on larger screens have higher peak velocities than those going shorter distances over the same time period. Larger screens should have longer durations so that movements aren't too fast. Tablets Durations on tablet should be about 30% longer than on mobile. For example, a 300ms mobile duration would increase to 390ms on tablet. Wearables Durations on wearables should be about 30% shorter than those on mobile. For example, a 300ms mobile duration would be 210ms on wearables. Because material must move greater distances on larger devices, transitions may have slightly slower durations than on smaller devices. Desktop Desktop animations should be faster and simpler than their mobile counterparts. These animations should last 150ms to 200ms. Because desktop transitions may be less noticeable, they should be immediately responsive and faster than their mobile counterparts. Complex web transitions often result in dropped frames (unless they are built for GPU acceleration). Shorter durations will make these less noticeable because the animation completes faster. Transitions appear much faster on desktop. Natural easing curves These natural easing curves affect an element’s speed, opacity, and scale. Acceleration and deceleration changes should be smooth across the duration of an animation so that movement doesn't appear mechanical. Motion appears more natural and delightful when acceleration and deceleration occur asymmetrically. Easing curves Easing curves may be named differently depending on the platform or software used. These guidelines will refer to them as standard, deceleration, acceleration, and sharp curves. Standard curve The standard curve (also referred to as “ease in out”) is the most common easing curve. Elements quickly accelerate and slowly decelerate between on-screen locations. It applies to growing and shrinking material, among other property changes. See more in Movement within screen bounds . Platform Protocol Android FastOutSlowInInterpolator iOS [[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:0.2f:1.0f] CSS cubic-bezier(0.4, 0.0, 0.2, 1); After Effects Outgoing Velocity: 40% Incoming Velocity: 80% Deceleration curve Using the deceleration curve (also referred to as “ease out”) elements enter the screen at full velocity and slowly decelerate to a resting point. During deceleration, elements may scale up either in size (to 100%) or opacity (to 100%). In some cases, when elements enter the screen at 0% opacity, they may slightly shrink from a larger size upon entry. See more in Movement in and out of screen bounds . Platform Protocol Android LinearOutSlowInInterpolator iOS [[CAMediaTimingFunction alloc] initWithControlPoints:0.0f:0.0f:0.2f:1.0f] CSS cubic-bezier(0.0, 0.0, 0.2, 1); After Effects Outgoing Velocity: 0% Incoming Velocity: 80% Acceleration curve Using the acceleration curve (also referred to as “ease in”) elements leave the screen at full velocity. They do not decelerate when off-screen. They accelerate at the beginning of the animation and may scale down in either size (to 0%) or opacity (to 0%). In some cases, when elements leave the screen at 0% opacity, they may also slightly scale up or down in size. See more in Movement in and out of screen bounds . Platform Protocol Android FastOutLinearInInterpolator iOS [CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f] CSS cubic-bezier(0.4, 0.0, 1, 1); After Effects Outgoing Velocity: 40% Incoming Velocity: 0% Sharp curve Using the sharp curve (also referred to as “ease in out”) elements quickly accelerate and decelerate. It is used by exiting elements that may return to the screen at any time. Elements may quickly accelerate from a starting point on-screen, then quickly decelerate in a symmetrical curve to a resting point immediately off-screen. The deceleration is faster than the standard curve since it doesn't follow an exact path to the off-screen point. Elements may return from that point at any time. See more in Movement in and out of screen bounds . Platform Protocol Android - iOS - CSS cubic-bezier(0.4, 0.0, 0.6, 1); After Effects Outgoing Velocity: 40% Incoming Velocity: 40% arrow_back Previous : Material motion arrow_forward Next : Movement