Discussion on: Using Framer Motion to make page transitions in React

[Sam Piggott]

Hey Willem!

Glad you enjoyed the guide :)

If I understand you correctly, to get your desired behaviour, it should be as straightforward as adjusting the initial, animate and exit props to fit your needs for each page separately. In the example I describe in the original post, we use the same props for both pages in order to gain the same transition when navigating through each page.

However, if you wanted to adjust, say, Page2's transition animation in, you simply need to change the properties for the Page2 component!

Here's an example. Below, Page1 would enter with a scaleY effect (stretching vertically), and Page2 would enter with a scaleX effect (stretching horizontally).

const Page1 = () => {
  return (
    <motion.div
      initial={{ scaleY: 0 }}
      animate={{ scaleY: 1 }}
      exit={{ scaleY: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div style={{ ...styles.page, ...styles.page1 }}>
        <p style={styles.copy}>This is page 1</p>
        <Link style={{ ...styles.copy, ...styles.link }} to="/page2">
          Go to Page 2
        </Link>
      </div>
    </motion.div>
  );
};

const Page2 = () => {
  return (
    <motion.div
      initial={{ scaleX: 0 }}
      animate={{ scaleX: 1 }}
      exit={{ scaleX: 0 }}
      transition={{ duration: 0.5 }}
    >
      <div style={{ ...styles.page, ...styles.page2 }}>
        <p style={styles.copy}>This is page 2</p>
        <Link style={{ ...styles.copy, ...styles.link }} to="/page1">
          Go to Page 1
        </Link>
      </div>
    </motion.div>
  );
};

You're not limited to just scaleX or scaleY - it can be any combination of any CSS properties! I'm just using these as a simple example.

Hope that helps!