All animations use motion tokens for duration and easing.
Durations zero automatically under
prefers-reduced-motion — no per-animation media queries needed.
@use "mixins" as *;
.my-element {
@include fade-up;
}
// with custom duration
.my-element {
@include fade-up(var(--duration-slow));
}Soft In
Simple opacity fade. Default entrance animation.
@include soft-in; Fade Up
Fades in while translating up from below.
@include fade-up; Fade In Top
Fades in while dropping from above.
@include fade-in-top; Fade In Bottom
Fades in while rising from below.
@include fade-in-bottom; Fade In Right
Fades in while sliding from the right.
@include fade-in-right; Fade Left
Fades in while sliding from the right toward left.
@include fade-left; Fade Out Top
Fades out while moving upward. Use for exit animations.
@include fade-out-top; Scale In Center
Scales in from zero. Clean entrance for modals and cards.
@include scale-in-center; Scale Up
Scales from 50% with a slight overshoot. Springy entrance.
@include scale-up; Puff In Center
Scales in from large with a blur. Dramatic entrance.
@include puff-in-center; Swing In Top
Rotates in from above on the X axis. Good for dropdowns.
@include swing-in-top; Jello Horizontal
Elastic squash and stretch. Use for attention or error states.
@include jello-horizontal;