Skip to main content
Launch Express integrates Motion React, 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 "motion/react";

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 "motion/react";

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.