Framer Motion

Launch Express integrates Framer Motion, a powerful animation library for React. This integration allows you to create fluid, responsive animations with ease, enhancing the user experience of your application.

​

The Animated Component

Launch Express includes a custom Animated 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 the Animated component provides convenient presets, you can also use Framer Motion directly for more complex animations:

import { motion } from 'framer-motion'

function MyCustomAnimation() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
    >
      Custom animated content
    </motion.div>
  )
}

​

Gesture Animations

Framer Motion excels at creating gesture-based animations. Here’s an example of a draggable component:

import { motion } from 'framer-motion'

function DraggableBox() {
  return (
    <motion.div
      drag
      dragConstraints={{ left: -100, right: 100, top: -100, bottom: 100 }}
      whileDrag={{ scale: 1.1 }}
      className="w-20 h-20 bg-blue-500"
    />
  )
}

​

Accessibility

When using animations, always consider users who may be sensitive to motion:

1. Respect the user’s prefers-reduced-motion setting.
2. Provide options to disable non-essential animations.
3. Ensure that important content is accessible without relying on animations.