Animations

Animations enhance user experience by assisting users in focusing their attention, conveying spatial relationships, and expressing our brand's tone.

import Animations from '@dynatrace/strato-design-tokens/animations';

Sample	Token Name	Value	Description
	Animations.Open.Duration.Fast Animations.Open.Duration.Base Animations.Open.Duration.Slow Animations.Open.Easing	170ms 250ms 400ms cubic-bezier(0, 0, 0.2, 1)
	Animations.Close.Duration.Fast Animations.Close.Duration.Base Animations.Close.Duration.Slow Animations.Close.Easing	0ms 170ms 250ms cubic-bezier(0.5, 0, 1, 1)
	Animations.SlideIn.Duration.Fast Animations.SlideIn.Duration.Base Animations.SlideIn.Duration.Slow Animations.SlideIn.Easing	200ms 300ms 400ms cubic-bezier(0, 0, 0.2, 1)
	Animations.SlideOut.Duration.Fast Animations.SlideOut.Duration.Base Animations.SlideOut.Duration.Slow Animations.SlideOut.Easing	150ms 250ms 350ms cubic-bezier(0.8, 0, 0.5, 1)
	Animations.FadeIn.Duration.Fast Animations.FadeIn.Duration.Base Animations.FadeIn.Duration.Slow Animations.FadeIn.Easing	150ms 250ms 350ms cubic-bezier(0.5, 0, 1, 1)
	Animations.FadeOut.Duration.Fast Animations.FadeOut.Duration.Base Animations.FadeOut.Duration.Slow Animations.FadeOut.Easing	150ms 250ms 350ms cubic-bezier(0, 0, 0.2, 1)
	Animations.Hover.Duration.Base Animations.Hover.Easing	150ms cubic-bezier(0, 0, 0.2, 1)
	Animations.StaggeredMotion.Duration.Fast Animations.StaggeredMotion.Duration.Base Animations.StaggeredMotion.Duration.Slow Animations.StaggeredMotion.Offset.Fast Animations.StaggeredMotion.Offset.Base Animations.StaggeredMotion.Offset.Slow Animations.StaggeredMotion.Easing	250ms 350ms 400ms 20ms 30ms 50ms cubic-bezier(0, 0, 0.2, 1)
	Animations.ExpandCollapse.Duration.Fast Animations.ExpandCollapse.Duration.Base Animations.ExpandCollapse.Duration.Slow Animations.ExpandCollapse.Easing	250ms 400ms 600ms cubic-bezier(0.4, 0, 0.2, 1)
	Animations.Move.Duration.Fast Animations.Move.Duration.Base Animations.Move.Duration.Slow Animations.Move.Easing	150ms 400ms 600ms cubic-bezier(0.4, 0, 0.2, 1)
	Animations.Rescale.Duration.Fast Animations.Rescale.Duration.Base Animations.Rescale.Duration.Slow Animations.Rescale.Easing	170ms 250ms 400ms cubic-bezier(0.4, 0, 0.2, 1)

Easings

Easings define the rate of change of an animation over time, affecting speed, acceleration, and deceleration.

import Easings from '@dynatrace/strato-design-tokens/easings';

Sample	Token Name	Value	Description
	Easings.Decelerate	cubic-bezier(0, 0, 0.2, 1)	Use to convey the deceleration of an object, such as when it's coming to a stop. It starts at a fast pace and then slows down at the end.
	Easings.Accelerate	cubic-bezier(0.5, 0, 1, 1)	Use to convey the acceleration of an object, such as when it's being launched. It starts at a slow pace and then speeds up at the end.
	Easings.SlowInFastOut	cubic-bezier(0.8, 0, 0.5, 1)	Use to draw attention to an object. It starts slowly, accelerates in the middle, and then slows down again at the end.
	Easings.FastInSlowOut	cubic-bezier(0.4, 0, 0.2, 1)	Use to move or scale objects. It starts slowly, quickly accelerates in the middle, and slows down at the end.
	Easings.OutBack	cubic-bezier(0.4, 1.6, 0.7, 1)	Use to convey a playful or elastic effect, such as when an object bounces or stretches. It overshoots its target position before settling back into place.

Timings

Timings define the duration of an animation.

import Timings from '@dynatrace/strato-design-tokens/timings';

Sample	Token Name	Value	Description
	Timings.Instant.Default	0ms
	Timings.Offset.Short Timings.Offset.Medium Timings.Offset.Long Timings.Offset.Default	20ms 30ms 100ms 50ms
	Timings.Fast.Quick Timings.Fast.Default Timings.Fast.Moderate	150ms 170ms 200ms
	Timings.Base.Quick Timings.Base.Default Timings.Base.Moderate	250ms 300ms 350ms
	Timings.Slow.Default Timings.Slow.Moderate Timings.Slow.Gentle	400ms 600ms 800ms