Skip to main content

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';
SampleToken NameValueDescription
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';
SampleToken NameValueDescription
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';
SampleToken NameValueDescription
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
Still have questions?
Find answers in the Dynatrace Community