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