Motion
Motion Foundation
How things move in Sabil UI. Short, purposeful animation that gives feedback, keeps space consistent and never gets in the way.
Tokens#
Three curves cover almost every case. They override Tailwind's ease-out and ease-in-out, so every component uses them without extra classes.
@theme { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* enter, exit, feedback */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* movement on screen */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* sheets and drawers */}Tools#
Use CSS for anything predetermined: press, hover, overlays, shimmer. CSS runs off the main thread and stays smooth while the page is busy. Use motion for what CSS cannot do: springs, gestures, exit animations, height auto and shared layout.
npm install motionInteraction#
PressPressable elements scale down slightly while held. It tells the user the interface heard them.CSSHoverSmall lifts and nudges that hint an element is interactive. Only on devices with a real pointer.CSSEnter & ExitElements fade and grow in from 95% scale, and leave faster than they came. Nothing appears from nothing.MotionPopover OriginPopovers grow out of the element that opened them. Modals are the exception: they stay centered.CSSStaggerItems that arrive together enter one after another, a few milliseconds apart. The eye reads it as one motion.Motion
State#
CollapseContent expands and collapses with its real height, so the layout below moves instead of jumping.MotionTab IndicatorThe active indicator slides between options, so the user sees where the selection went.MotionCrossfade + BlurLabels and icons swap through a short blur, so two states read as one change instead of two overlapping objects.MotionNumber TickerNumbers count to their new value with a spring, so the size of the change is visible.MotionSkeleton ShimmerA soft highlight sweeps across placeholders while content loads. Fast enough to feel busy, slow enough to stay calm.CSS
Gesture & Overlay#
Toast StackNew toasts push in from the edge. Older ones tuck behind and fan out on hover.MotionDrawerA sheet slides up from the bottom and can be flicked away. Velocity counts, not only distance.MotionHold to ConfirmDestructive actions fill up while held. Pressing is slow and deliberate, releasing snaps back fast.CSSSwipe to DismissCards follow the finger and leave when flicked. The rest of the list closes the gap.Motion