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.FastAnimations.Open.Duration.BaseAnimations.Open.Duration.SlowAnimations.Open.Easing | 170ms250ms400mscubic-bezier(0, 0, 0.2, 1) | ||
Animations.Close.Duration.FastAnimations.Close.Duration.BaseAnimations.Close.Duration.SlowAnimations.Close.Easing | 0ms170ms250mscubic-bezier(0.5, 0, 1, 1) | ||
Animations.SlideIn.Duration.FastAnimations.SlideIn.Duration.BaseAnimations.SlideIn.Duration.SlowAnimations.SlideIn.Easing | 200ms300ms400mscubic-bezier(0, 0, 0.2, 1) | ||
Animations.SlideOut.Duration.FastAnimations.SlideOut.Duration.BaseAnimations.SlideOut.Duration.SlowAnimations.SlideOut.Easing | 150ms250ms350mscubic-bezier(0.8, 0, 0.5, 1) | ||
Animations.FadeIn.Duration.FastAnimations.FadeIn.Duration.BaseAnimations.FadeIn.Duration.SlowAnimations.FadeIn.Easing | 150ms250ms350mscubic-bezier(0.5, 0, 1, 1) | ||
Animations.FadeOut.Duration.FastAnimations.FadeOut.Duration.BaseAnimations.FadeOut.Duration.SlowAnimations.FadeOut.Easing | 150ms250ms350mscubic-bezier(0, 0, 0.2, 1) | ||
Animations.Hover.Duration.BaseAnimations.Hover.Easing | 150mscubic-bezier(0, 0, 0.2, 1) | ||
Animations.StaggeredMotion.Duration.FastAnimations.StaggeredMotion.Duration.BaseAnimations.StaggeredMotion.Duration.SlowAnimations.StaggeredMotion.Offset.FastAnimations.StaggeredMotion.Offset.BaseAnimations.StaggeredMotion.Offset.SlowAnimations.StaggeredMotion.Easing | 250ms350ms400ms20ms30ms50mscubic-bezier(0, 0, 0.2, 1) | ||
Animations.ExpandCollapse.Duration.FastAnimations.ExpandCollapse.Duration.BaseAnimations.ExpandCollapse.Duration.SlowAnimations.ExpandCollapse.Easing | 250ms400ms600mscubic-bezier(0.4, 0, 0.2, 1) | ||
Animations.Move.Duration.FastAnimations.Move.Duration.BaseAnimations.Move.Duration.SlowAnimations.Move.Easing | 150ms400ms600mscubic-bezier(0.4, 0, 0.2, 1) | ||
Animations.Rescale.Duration.FastAnimations.Rescale.Duration.BaseAnimations.Rescale.Duration.SlowAnimations.Rescale.Easing | 170ms250ms400mscubic-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.ShortTimings.Offset.MediumTimings.Offset.LongTimings.Offset.Default | 20ms30ms100ms50ms | ||
Timings.Fast.QuickTimings.Fast.DefaultTimings.Fast.Moderate | 150ms170ms200ms | ||
Timings.Base.QuickTimings.Base.DefaultTimings.Base.Moderate | 250ms300ms350ms | ||
Timings.Slow.DefaultTimings.Slow.ModerateTimings.Slow.Gentle | 400ms600ms800ms |
Still have questions?
Find answers in the Dynatrace Community