Motion design and interface animations

1) Why animation in the product

• explains causal relationships (where it disappeared, where the element came from),
• directs attention to the main action,
• confirms the result (feedback) and reduces cognitive load,
• makes transitions predictable and "tangible."

Rule # 1: meaning> style. Any animation answers the question "what happened and how does it relate to me? ».

2) Basic principles

1. Motion hierarchy: Containers move first, then contents, then parts.
2. Consistency: The same patterns for the same actions.
3. Savings: minimum properties, minimum frames; better shorter and clearer.

4. Realistic physics: acceleration at the beginning, deceleration at the end; there are no "jerks."

5. Reversibility: "back" feels mirror-like "forward."

6. Accessibility: Respect the animation reduction system settings.

3) Durations and curves (recommendations)

3. 1 Durations (desktop/mobile)

Hover: 120-180ms

Focus/Pressed: 80–120 мс

Tooltip/Toast: input 180-240ms, output 120-160ms

Modals/Drouers: 200-320 ms

Screen transitions: 240-360 ms

Scrolling/Parallax: ≤ 200ms per segment, avoid infinite loops

3. 2 Curves

Main: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) '- natural "material" pace

Input faster, output softer: 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Elasticity (rare, accent): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'with overshoot limit ≤ 8px/8 °

Rule: do not use linear interpolation for movements and opacity at the same time - the feeling of "mechanicity."

4) Transition choreography

Appearance: light scale 0. 98→1. 0 + fade-in, 8-16 px offset along the origin axis.
Disappearance: reverse order, faster than entry (− 20-30%).
Turning/changing tabs: the general "base" (container) is shifted by 16-24 px; the active tab is highlighted before the motion starts.
Lists: loosen the cascade (stagger 20-40 ms/element, no more than 6-8 elements).

5) Micro-interactions (patterns)

Button (hover/press): shadow + light subscreen/scale 0. 98; pressed bounces ≤ 80ms.
Focus: contrast ring without blur; animate thickness/transparency instead of glow.
Inputs: carriage/field illumination on focus; errors - shaking ≤ 6 px, ≤ 140 ms, 1 cycle.
Toggle/Checkbox: snap to the final position, click delay no more than 60-80 ms.
Skeleton/load: shimmer 1200-1600 ms, brightness amplitude ≤ 20%, without sharp flashes.

6) Content states

Loading → Success/Empty/Error: one "channel" of movement; don't mix different directions.
Toast/Alerts: arrive from the source side of the event (e.g. bottom-right for user actions).
Pull to refresh: elastic spring tension; return time ≤ 250 ms.

7) Accessibility (A11y) and security

Support'prefers-reduced-motion: reduce ': Replace moves with fade/scale ≤ 1% or static transition.
Avoid flashes> 3 per second and large contrast flashes (photosensitive epilepsy).
Do not use strong parallax/zoom in users with motion sickness history; make the disconnect option.
Focus styles are always visible without animation (not just color/motion).

8) Performance (60 FPS as target)

Animate only opacity and transform (translate/scale/rotate); avoid 'top/left/width/height'.
Include compositing: 'transform: translateZ (0)' or 'will-change: transform, opacity'.
Minimize repaint by not animating large blur shadows and filters on multiple elements.
Break big transitions into batches; use requestAnimationFrame.
For lists, off-screen virtualization/re-layout.

9) Motion tokens in the design system

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: `motion.{duration|easing|stagger}.{role}` — `hover`, `focus`, `overlayIn`, `pageTransition`, `listItem`.

10) Implementation (CSS/JS/React)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0. 22 } }}
exit={{ opacity: 0, transition: { duration: 0. 16 } }}
className="fixed inset-0 bg-black/50"
>
<motion. div initial={{ y: 16, scale: 0. 98, opacity: 0 }}
animate={{ y: 0, scale: 1, opacity: 1, transition: { duration: 0. 24, ease: [0. 2,0,0. 2,1] } }}
exit={{ y: 8, scale: 0. 99, opacity: 0, transition: { duration: 0. 18 } }}
className="m-auto max-w-lg rounded-2xl bg-white p-6"
>
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

Lottie/SVG: use for illustrative empty states and onboarding; not for critical controls. Optimize and cache.

11) Loading patterns

Skeleton instead of a spinner where the content structure is known.

Progress: deterministic bar if progress is known; indeterminate - with a uniform pace, without "jerks."

Avoid "floating" skeleton when rebuilding - lock dimensions.

12) Page/screen transitions

Keep the point of attention (shared element transitions) - the card is "expanded" into the part.
Navigation "deep" goes forward/right/up, "back" - back; the direction is the same for the platform.
Background substrate darkens to 40-60% at overlays.

13) The specifics of iGaming

Spin/Reveal: one short acceleration (≤ 200 ms) + uniform rotation + soft attenuation; prohibition of infinite cycles without action.
Win/Jackpot: light splash ≤ 500 ms, no strobe; double sound at low volume; victory text is readable (AAA in contrast).
Tournaments/ratings: account increment - counter with tabular numbers and light step of 40-60 ms/unit (batches), without "jumps" layout.
Responsible play: notifications and limits without distracting effects; animation is minimal, emphasis on readability.

14) Anti-patterns

Delay> 120ms to click response.
"Elevator" from opacity + scale 0. 9→1. 05→1. 0 with overshoot for every little thing.
Background parallax that conflicts with the scroll.
Infinite flickers/pulsations.
Animate layout/paint properties ('height', 'left', 'filter: blur ()') on a set of elements.
Non-constant curves and durations for the same actions.

15) Process and QA

• Prototypes with timings/curves; frame-level choreography.
• Catalog of motion tokens and examples for components.

• Unit visibility/state tests (transitions end as expected).
• Visual tests (snapshots of the end of animations).
• Performance/Timeline on scenes with maximum load.

• 'prefers-reduced-motion' supported.
• Transform/opacity only.
• Durations and curves correspond to tokens.
• No flashes> 3/sec and strong strobe.
• Skeleton instead of spinner where possible.
• Transitions are reversible and predictable.

16) Documentation in the design system

Motion tokens: duration/easing/stagger with examples.
"Transition patterns": modals, lists, tabs, pages.
"A11y & Performance": guide to reduce-motion and compositing.
"Do/Don't": short clips with good/bad examples.

Brief Summary

Motion design is the language of cause and effect. Keep timings short, curves consistent and properties cheap to render. Respect availability, document tokens, and check performance. Then the animation will strengthen the UX and will not interfere with the speed and clarity of the interface.