Interactive demonstrations of the TSH animation design language — scroll-reveal, micro-interactions, transitions, and accent animations.
| Property | Value | Notes |
|---|---|---|
| Properties | transform, opacity, filter only | GPU-composited — never width/height/margin/top/left |
| Micro-interactions | 150–200ms ease-out | Hover, click, focus feedback |
| Reveals | 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) | Cards entering viewport |
| Page transitions | 250–300ms | Exit: 250ms ease-in / Enter: 300ms ease-out |
| Section transitions | 500ms cubic-bezier(0.4, 0, 0.2, 1) | Accent bar, large reveals |
| Stagger | 80ms per element | Cards in a row |
| Accessibility | prefers-reduced-motion | Respect system motion preferences |
Cards animate in from below as they enter the viewport, with 80ms stagger. Uses IntersectionObserver — disconnects after reveal.
One dashboard for all club departments.
Live data feeds from every source.
Secure permissions for every stakeholder.
Auto-generated reports in seconds.
Eliminate data silos across your club.
Full platform access on any device.
300ms · Easing: cubic-bezier(0.25, 0.46, 0.45, 0.94) · Stagger: 80msVertical red accent bar scales in from top, followed by content fade-in after 150ms delay. Click the button to replay.
400ms cubic-bezier(0.4, 0, 0.2, 1) · Content: 300ms + 150ms delayExit slides left and fades out (250ms). Enter slides in from right and fades in (300ms). Click the tabs to trigger the transition.
Welcome to the Total Sports Hub dashboard. Monitor all club operations from a single view.
250ms ease-in · Enter: 300ms ease-out · Sequential (Promise-based)Animated left-to-right underline on the active nav item. Hover reveals a partial underline. All using CSS pseudo-element on ::after.
scaleX 0→1 · Hover: scaleX 0→0.5 · Duration: 200ms ease-outCards lift on hover with elevated shadow and accent border. Buttons scale and brighten. All at 150ms ease-out.
translateY(-4px) · Button: scale(1.03) brightness 1.1 · All: 150ms ease-out| Element | Duration | Easing | Trigger |
|---|---|---|---|
| Card reveal | 300ms | cubic-bezier(0.25,0.46,0.45,0.94) | IntersectionObserver |
| Card hover | 150ms | ease-out | :hover |
| Button hover | 150ms | ease-out | :hover |
| Accent bar entry | 400ms | cubic-bezier(0.4,0,0.2,1) | Class toggle |
| Content fade-in | 300ms + 150ms delay | ease-out | After accent bar |
| Nav underline | 200ms | ease-out | Class / :hover |
| Page exit | 250ms | ease-in | Route change |
| Page enter | 300ms | ease-out | After exit |