MetaMask / MetaMask/metamask-design-system
Audit current MMDS animation approach and define stack-specific animation guidance
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
## Context
We want to review these animation principles:
https://gist.github.com/corysimmons/1e2f64603ae234602f92dafe2b549ea9
Initial prompt:
> can you audit all of our animations against this rule set https://gist.github.com/corysimmons/1e2f64603ae234602f92dafe2b549ea9
Follow-up request:
> We want to review these animation principles. run an audit on orcurrent animations approach and eventually add our own rule based on these but for our current stack - animation tokens, tailwind and any inline animation or react reanimated uses
## Goal
Audit our current animation approach against the referenced principles, then use that audit to define our own MMDS animation guidance for the current stack:
- animation tokens
- Tailwind utilities/classes
- inline web animation usage
- React Native animation usage
- `react-native-reanimated` usage
## Audit Summary
Current motion usage is fairly limited, but there are several consistency and accessibility gaps.
### Findings
1. Reduced motion is not respected.
- I found no usage of `prefers-reduced-motion`, `motion-safe`, `motion-reduce`, `useReducedMotion`, `AccessibilityInfo`, `isReduceMotionEnabled`, or equivalent checks in `packages/` or `apps/`.
- Existing animation entry points appear to run unconditionally across web and native.
2. Web button interaction uses UI-unfriendly easing and overly broad transition scope.
- `packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx`
- Uses `transition-all` and `ease-linear` for interactive button motion.
- This conflicts with the principle to avoid linear easing for UI transitions and to animate only the properties that need animation.
3. Native bottom sheet overlay uses linear easing for a foreground UI transition.
- `packages/design-system-react-native/src/components/BottomSheetOverlay/BottomSheetOverlay.tsx`
- Fade-in uses `Easing.linear`.
- The reference guidance reserves linear motion for progress indicators and looping background animation, not primary UI transitions.
4. Toast motion does not match the recommended toast pattern.
- `packages/design-system-react-native/src/components/Toast/Toast.tsx`
- `packages/design-system-react-native/src/components/Toast/Toast.constants.ts`
- Toasts slide only, with no opacity transition.
- Enter and exit both use 300ms instead of a faster exit.
- The reference guidance recommends slide-from-edge plus fade, with exits faster than entrances.
5. Native checkbox motion is too bouncy for the target style.
- `packages/design-system-react-native/src/components/Checkbox/Checkbox.tsx`
- Toggle animation scales to `1.15`, which is much more expressive than the suggested subtle press/toggle feedback.
- The check icon also fades over 300ms without any paired movement.
6. Skeleton loading pulse exceeds the suggested total timing cap.
- `packages/design-system-react-native/src/components/Skeleton/Skeleton.tsx`
- The pulse loop runs for 1400ms total.
- The reference guidance suggests keeping animation under 1 second total.
7. Loading still relies on spinners in a few places.
- Web: `packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx`
- Native: `packages/design-system-react-native/src/components/temp-components/Spinner/Spinner.tsx`
- The reference guidance prefers subtle pulse/skeleton states and treats spinners as a last resort.
## In-Scope Motion Surfaces Found
### Web
- `packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx`
- `packages/design-system-react/src/components/Checkbox/Checkbox.tsx`
- `packages/design-system-react/src/components/Input/Input.tsx`
- `packages/design-system-react/src/components/TextButton/TextButton.tsx`
### React Native
- `packages/design-system-react-native/src/components/Checkbox/Checkbox.tsx`
- `packages/design-system-react-native/src/components/Skeleton/Skeleton.tsx`
- `packages/design-system-react-native/src/components/BottomSheetOverlay/BottomSheetOverlay.tsx`
- `packages/design-system-react-native/src/components/BottomSheetDialog/BottomSheetDialog.tsx`
- `packages/design-system-react-native/src/components/Toast/Toast.tsx`
- `packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx`
- `packages/design-system-react-native/src/components/temp-components/ButtonAnimated/ButtonAnimated.tsx`
- `packages/design-system-react-native/src/components/temp-components/Spinner/Spinner.tsx`
## Proposed Next Steps
1. Define MMDS-specific animation principles for web and React Native instead of adopting the referenced rules verbatim.
2. Add explicit reduced-motion guidance for both platforms.
3. Standardize allowed durations/easing curves through design tokens where possible.
4. Define approved Tailwind patterns for interactive web motion.
5. Define approved `react-native-reanimated` and `Animated` patterns for native motion.
6. Review whether spinners remain acceptable in MMDS, or whether skeleton/pulse should be the default loading language.
7. Decide which current components should be remediated first after the principles are agreed.
## Acceptance Criteria
- We review the external animation principles and decide what should or should not map to MMDS.
- We document MMDS animation guidance for our current stack.
- We identify the initial remediation set for existing components.
Contributor guide
Research direction
Start by reviewing the referenced animation principles, then inspect the listed web and React Native entry points, especially ButtonBase, Toast, Checkbox, Skeleton, and BottomSheetOverlay. Compare their motion, reduced-motion handling, easing, and timing with the principles. Done means documented MMDS guidance for tokens, Tailwind, web animation, Animated, and react-native-reanimated, plus an agreed initial remediation set.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, tailwindcss, typescript
- Domain
- design, documentation, frontend, mobile
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100