* I don't know if its survey engineer, tool operator or field service technician,

* a risky, adventurous  one

random thought on my last work experience

## Animating Remix Pages with Motion

Remix (React router v7) is a powerful web framework that allows for fast, dynamic routing. When combined with Motion, you can create smooth, animated transitions between pages (Routes), enhancing the user experience. This article will guide you through the process of adding page transition animations to your Remix application using [Motion](http://motion.dev).

## Prerequisites

Before we begin, make sure you have:

1. A basic understanding of React and Remix

2. Remix installed in your project

3. Framer Motion installed (`npm install framer-motion` or `yarn add framer-motion`)

## Setting Up Your Remix Project

Let’s start with a typical Remix project structure:

```
app/
├── routes/
│   ├── _index.tsx
│   └── about.tsx
└── root.tsx
```

Your `root.tsx` file might look something like this:

```
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export default function Root() {
  return (
    <html lang="en">
      <head>
        <Links />
        <Meta />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}
```

## Step 1: Create Motion Components

First, we’ll wrap our page content in Framer Motion components. Update your route files (`_index.tsx` and `about.tsx`) like this:

```
import { motion } from 'framer-motion';

const MotionPage = motion.div;

export default function Index() {
  return (
    <MotionPage>
      <h1>/</h1>
      <p>index page</p>
    </MotionPage>
  );
}
```

Do the same for the `about.tsx` file.

## Step 2: Set Up AnimatePresence

To enable enter/exit animations, we need to use Framer Motion’s `AnimatePresence` component. Update your `root.tsx`:

```
import {
  Links,
  Meta,
  useOutlet,
  useLocation,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import { AnimatePresence } from "framer-motion";

export default function Root() {
  const outlet = useOutlet();
  const location = useLocation();

  return (
    <html lang="en">
      <head>
        <Links />
        <Meta />
      </head>
      <body>
        <AnimatePresence mode='wait' initial={false}>
          <div key={location.pathname}>
            {outlet}
          </div>
        </AnimatePresence>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}
```

Note: We use `useOutlet()` instead of `<Outlet />` to allow for exit animations.

i tried both and `<Outlet/>` skip exit animation

## Step 3: Define Animation Variants

Create a new file `variants.ts` to define your animation variants:

```
export const pageVariants = {
  initial: {
    opacity: 0,    y: 50,  },  in: {
    opacity: 1,    y: 0,    transition: {
      duration: 0.3,      ease: "easeOut",    },  },  out: {
    opacity: 0,    y: -50,    transition: {
      duration: 0.3,      ease: "easeIn",    },  },};
```

## Step 4: Apply Animations to Pages

Now, update your route components to use these variants:

```
import { motion } from 'framer-motion';
import { pageVariants } from '../variants';

export default function Index() {
  return (
    <motion.div
      initial="initial"
      animate="in"
      exit="out"
      variants={pageVariants}
    >
      <h1>/</h1>
      <p>index page</p>
    </motion.div>
  );
}
```

Apply the same changes to `about.tsx`.

## Step 5: Staggering Children Animations (Optional)

For more complex pages, you might want to stagger the animation of child elements. Here’s how you can do that:

```
// In variants.ts export const containerVariants = {
  hidden: {
    opacity: 0,    y: 50,    transition: {
      when: "afterChildren",      staggerChildren: 0.1,    },  },  visible: {
    opacity: 1,    y: 0,    transition: {
      when: "beforeChildren",      staggerChildren: 0.1,    },  },};export const itemVariants = {
  hidden: { opacity: 0, y: 20 },  visible: { opacity: 1, y: 0 },};
```

Then in your route component:

```
import { motion } from 'framer-motion';
import { containerVariants, itemVariants } from '../variants';

export default function About() {
  return (
    <motion.div
      initial="hidden"
      animate="visible"
      exit="hidden"
      variants={containerVariants}
    >
      <motion.h1 variants={itemVariants}>/about</motion.h1>
      <motion.p variants={itemVariants}>About page content</motion.p>
    </motion.div>
  );
}
```

## Conclusion

By following these steps, you’ve successfully added smooth page transitions to your Remix application using Framer Motion. This technique enhances the user experience by providing visual continuity between route changes.

Remember to experiment with different animation variants to find the style that best suits your application’s design and feel. Happy coding!

Remix guid to animated routes with framer motion.

Developer / Designer / Enginner

how to create an api with strapi by rebuilding the mdn express.js local library website

CRUD web app built with Strapi.js and Next.js inspired by the Mozilla Developer Network Express.js tutorial series

Signaux en Ingénierie des Système et Informatique Industrielle

Master

Title:
[French] signaux en ingénierie des système et informatique industriel.

My First time using vue.js "Nuxtjs" together with WP "headless Arch" to Build a Agency Webapp.  

Agency Web site

my personal website \[v2\] built with Remix, motion.dev, unocss & vite

serverless on cloudflare pages & functions

Blog

Teaching about sustainable development Goals,  with both English  and french

SDG keeper

Independent Web developer,

schedule, repair and install equipment and machines

Maintenance Engineer

Using Rosen ILI tools (Inteligents pigs) to inspect pipelines for metal lose, pipeline deformations and geolocation

survey Engineer

software engineer

convert the design into high quality client side code.
communicate with the backend APIs (Laravel).

chetoui hamza

2024