Motion React

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.