Layout Container

Page Transition FTW

Page transitions are hard. Especially when you're trying to coordinate the mounting/unmounting of many different components.

This is where <LayoutContainer /> comes in.

In essence, it's a wrapper for the <Main /> content in _app.js, and uses Framer-Motion to handle a subtle fade in animation when the user navigates to a different page.

Framer-Motion has a very useful component for this called 'Animate Presence' that handles all the complicated mounting/unmounting logic and allows us to specify the type of animation and order in which it occurs:

 <AnimatePresence
      initial={false}
      exitBeforeEnter
      onExitComplete={() => {
        window.scrollTo({ top: 0, left: 0, behavior: 'auto' })
        useScrollToHash(asPath, 500) // Custom hook - check it out in 'web/hooks'
      }}
    >

💡Top Tip: If you're seeing horizontal scroll bars, make sure that the <$LayoutContainer /> has a width set to 100% and not 100vw.