title: Animation when I change a locale - framer motion
body: <p>is it possible in Next.js that when I change a locale (i18n) to one to another there will be an animation?
  I've tried Higher-Order Components but it doesn't work.
  My HOC</p>
  <pre class="lang-js prettyprint-override"><code>        import { motion } from 'framer-motion'
      import { chakra, shouldForwardProp } from '@chakra-ui/react'
      
      const StyledDiv = chakra(motion.div, {
        shouldForwardProp: prop =&gt; {
          return shouldForwardProp(prop) || prop === 'transition'
        }
      })
      
      const Section = ({ children, delay = 0 }) =&gt; (
        &lt;StyledDiv
          initial={{ y: 10, opacity: 0 }}
          animate={{ y: 0, opacity: 1 }}
          transition={{ duration: 0.8, delay }}
          mb={6}
        &gt;
          {children}
        &lt;/StyledDiv&gt;
      )
      
      export default function WithAnimation(Component) {
        return props =&gt; (
          &lt;Section&gt;
            &lt;Component {...props} /&gt;
          &lt;/Section&gt;
        )
  
  }
  </code></pre>
  <p>_app js</p>
  <pre class="lang-js prettyprint-override"><code>//(...)
  import Layout from '../components/layouts/main'
  import WithAnimation from '../components/with-animation'
  function Website({ Component, pageProps, router }) {
    const { locale } = router
    const t = locale === 'en' ? en : pl
    return (
      &lt;ChakraProvider theme={theme}&gt;
        &lt;Fonts /&gt;
        &lt;Layout router={router}&gt;
          &lt;Component {...pageProps} key={router.route} /&gt;
        &lt;/Layout&gt;
        &lt;MessengerCustomerChat
          pageId=&quot;secretxxxxxxxxx&quot;
          appId=&quot;secretxxxxxxxxxxxxxx&quot;
          language={t.messengerChatLang}
          loggedInGreeting={t.loggedInGreetingLang}
          themeColor={t.themeColorLang}
        /&gt;
      &lt;/ChakraProvider&gt;
    )
  }
  
  export default WithAnimation(Website)
  </code></pre>
  <p>I render on my <code>Website</code> component with HOC <code>WithAnimation(Website)</code></p>
  <p>// update 1:
  main.js (Layout component in _app.js)</p>
  <pre class="lang-js prettyprint-override"><code>import NavBar from '../navbar'
  import { Box, Container } from '@chakra-ui/react'
  import Footer from '../footer'
  
  const Main = ({ children, router }) =&gt; {
    return (
      &lt;Box as=&quot;main&quot;&gt;
        &lt;NavBar path={router.asPath} /&gt;
        &lt;Container maxW=&quot;container.md&quot; pt={14}&gt;
          {children}
          &lt;Footer /&gt;
        &lt;/Container&gt;
      &lt;/Box&gt;
    )
  }
  
  export default Main
  
  </code></pre>
  <p>I want to animate</p>
  <pre class="lang-js prettyprint-override"><code> &lt;Container maxW=&quot;container.md&quot; pt={14}&gt;
          {children}
          &lt;Footer /&gt;
        &lt;/Container&gt;
  </code></pre>
  <p>when everytime a locale (i18n) is changed</p>