The Animated Component
Launch Express includes a customAnimated
component located in components/Animated.tsx
. This component wraps Framer Motion’s functionality, providing a simplified interface for common animation scenarios.
For more information, see the Animated component documentation.
Custom Animations
While theAnimated
component provides convenient presets, you can also use Framer Motion directly for more complex animations:
Gesture Animations
Framer Motion excels at creating gesture-based animations. Here’s an example of a draggable component:Accessibility
When using animations, always consider users who may be sensitive to motion:- Respect the user’s
prefers-reduced-motion
setting. - Provide options to disable non-essential animations.
- Ensure that important content is accessible without relying on animations.