Animated Page Transitions

Mark Sikaundi

August 24, 2024

Create animated transitions using React and Framer Motion. Framer Motion is a popular library for creating smooth animations in React applications. The animated transitions should include the following features:

This component demonstrates three types of animated transitions:

• Fade Transition: The first element fades in and out using opacity.
• Scale Transition: The second element scales in and out.
• Slide Transition: The third element slides in and out from the right.

Here's a breakdown of the key features:

• We use the `useState` hook to manage the visibility state of the elements.
• The `AnimatePresence` component from Framer Motion is used to handle exit animations.
• Each `motion.div` has `initial`, `animate`, and `exit` props that define the animation states.
• The slide transition uses a spring animation for a more dynamic effect.
• The layout is responsive, using a grid that adjusts from 1 column on mobile to 3 columns on larger screens.
• We're using the `Button` component from the shadcn/ui library for consistency with the Vercel design system.

Here's a preview of the Animated page:

Note:

This example provides a good starting point for creating animated transitions in your React application. You can further customize the animations by adjusting the properties in the `initial`, `animate`, and`exit` objects, or by using different animation types provided by Framer Motion. Feel free to experiment with different animations and styles to create unique transitions for your project. Happy coding!