Animations - Canvas Design System

Timing Tokens

Standardized durations and easing functions for consistent motion.

Durations

Token	Value	Use Case
`--transition-fast`	150ms	Hover states, micro-interactions
`--transition-base`	200ms	Standard transitions, button clicks
`--transition-slow`	300ms	Page transitions, modals, panels

Easing Functions

Name	Value	Use Case
`ease`	Default	General purpose
`ease-out`	Fast start, slow end	Entrances, appearing elements
`ease-in`	Slow start, fast end	Exits, disappearing elements
`cubic-bezier(0, 0, 0.2, 1)`	Decelerate	Cards, dropdowns
`cubic-bezier(0.68, -0.55, 0.265, 1.55)`	Bounce	Attention, playful UI

Continuous Animations

Looping animations for loading states and attention.

Spin

refresh

ws-animate-spin

Loading spinners, refresh indicators

Pulse (Opacity)

notifications

ws-animate-pulse

Attention, live indicators

Pulse (Scale)

favorite

ws-animate-pulse-scale

Heartbeat, recording

Entrance Animations

Animations for elements appearing on screen. Click "Replay" to see them in action.

Fade In

ws-animate-fade-in

Fade In Up

ws-animate-fade-in-up

Fade In Down

ws-animate-fade-in-down

Scale In

ws-animate-scale-in

Slide In Up

ws-animate-slide-in-up

Slide In Down

ws-animate-slide-in-down

Slide In Right

ws-animate-slide-in-right

Slide In Left

ws-animate-slide-in-left

Attention Animations

Animations to draw user attention or indicate state changes.

Bounce In

check

ws-animate-bounce-in

Success confirmations, achievements

Shake

warning

ws-animate-shake

Errors, invalid input

Loading States

Visual feedback for async operations and content loading.

Spinner

ws-spinner

Button loading, async operations

Loading Dots

ws-loading-dots

AI thinking, typing indicator

Skeleton

ws-skeleton

Content placeholder loading

Staggered Animations

Sequential animations for lists and grids.

Stagger Children

ws-stagger-children

Card grids, list items, navigation menus. Each child animates with 50ms delay.

/* Stagger delay pattern (up to 12 children) */ .ws-stagger-children > *:nth-child(1) { animation-delay: 0ms; } .ws-stagger-children > *:nth-child(2) { animation-delay: 50ms; } .ws-stagger-children > *:nth-child(3) { animation-delay: 100ms; } .ws-stagger-children > *:nth-child(4) { animation-delay: 150ms; } /* ... continues to 12 */

Component Animation Patterns

Standard animations used by UI components.

Component	Enter Animation	Exit Animation	Duration
Modal	`scale-in` + `fade-in`	`scale-out` + `fade-out`	200ms / 150ms
Dropdown	`slide-in-down` + `fade-in`	`fade-out`	200ms / 150ms
Toast	`slide-in-right`	`fade-out` + translateX	300ms / 200ms
Drawer	`slide-in-right`	`slide-out-right`	300ms
Card (list)	`slide-in-up` + stagger	`fade-out`	400ms / 200ms
Tooltip	`fade-in`	`fade-out`	150ms
Button (loading)	`spin`	—	700ms loop
Page transition	`page-enter`	`page-exit`	400ms / 200ms

Accessibility

Motion accessibility is built into the animation system.

Reduced Motion Support

All animations respect the user's prefers-reduced-motion setting. When enabled, animations are disabled or reduced to simple opacity changes.

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .ws-skeleton, .ws-shimmer { animation: none; } .ws-spinner { animation: none; } }

accessibility_new

Always provide non-animated fallbacks. Loading spinners should include aria-label="Loading" or equivalent text. Never rely solely on animation to convey information.

Usage

CSS Classes

/* Add animation class to trigger */ <div class="ws-animate-fade-in-up">Content</div> /* Stagger children */ <div class="ws-stagger-children"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div> /* Loading spinner */ <div class="ws-spinner"></div> <div class="ws-spinner ws-spinner--lg ws-spinner--white"></div>

JavaScript Trigger

// Trigger animation on event element.classList.add('ws-animate-bounce-in'); // Remove after animation completes element.addEventListener('animationend', () => { element.classList.remove('ws-animate-bounce-in'); });

Do

Use subtle animations (200-400ms)
Animate entrance, not exit (faster exits)
Use ease-out for entrances
Stagger lists for visual flow
Respect reduced motion preferences

Don't

Animate everything (be selective)
Use long durations (>500ms)
Block user interaction during animations
Use bounce/spring for serious UI
Animate layout properties (width/height)

File Reference

File	Purpose
`css/base/_animations.css`	All keyframes, utility classes, spinners, skeletons
`design-system/platform-tokens.css`	Timing tokens (--transition-fast, --transition-base, --transition-slow)