Framer-motion animation when I change a locale from one to another

[belkocik]

Hello, is it possible to apply a animation (framer-motion) when I change a locale from one to another? Next.js re-renders the whole page when I change the locale but I would like to appply a animation similar to this

    initial={{ y: 10, opacity: 0 }}
    animate={{ y: 0, opacity: 1 }}
    transition={{ duration: 0.8, delay }}
    mb={6}

Section component where I wrap all the content on each page.

import { motion } from 'framer-motion'
import { chakra, shouldForwardProp } from '@chakra-ui/react'

const StyledDiv = chakra(motion.div, {
  shouldForwardProp: prop => {
    return shouldForwardProp(prop) || prop === 'transition'
  }
})

const Section = ({ children, delay = 0 }) => (
  <StyledDiv
// ANIMATION
    initial={{ y: 10, opacity: 0 }}
    animate={{ y: 0, opacity: 1 }}
    transition={{ duration: 0.8, delay }}
    mb={6}
  >
    {children}
  </StyledDiv>
)

export default Section 

my language-picker component

import {
  useDisclosure,
  MenuItem,
  Menu,
  MenuButton,
  MenuList,
  useColorModeValue,
  VStack,
  Flex
} from '@chakra-ui/react'
import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
import { useRouter } from 'next/router'
import en from '../locales/en'
import pl from '../locales/pl'

const LanguagePicker = () => {
  const router = useRouter()
  const { locale } = router
  const t = locale === 'en' ? en : pl

  const changeLanguage = e => {
    const locale = e.target.value
    router.push(router.pathname, router.asPath, { locale })
  }

  const { isOpen, onOpen, onClose } = useDisclosure()

  return (
    <Menu isOpen={isOpen}>
      <MenuButton
        borderRadius={5}
        _hover={{ color: 'teal.400' }}
        display={{ base: 'none', md: 'inline-block' }}
        aria-label="Languages"
        fontWeight="normal"
        onMouseEnter={onOpen}
        onMouseLeave={onClose}
        width="74px"
        ml="30px"
      >
        <Flex justify="center" align="center">
          {t.language} {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
        </Flex>
      </MenuButton>
      <MenuList
        onMouseEnter={onOpen}
        onMouseLeave={onClose}
        bg={useColorModeValue('gray.50', '#202023')}
        minW="0"
        w={'90px'}
      >
        <Flex justify="center">
          <VStack>
            <MenuItem
              value="en"
              onClick={changeLanguage}
              _hover={{
                color: 'teal.400'
              }}
            >
              {t.englishLang}
            </MenuItem>
            <MenuItem
              value="pl"
              onClick={changeLanguage}
              _hover={{
                color: 'teal.400'
              }}
            >
              {t.polishLang}
            </MenuItem>
          </VStack>
        </Flex>
      </MenuList>
    </Menu>
  )
}

export default LanguagePicker

[isaachinman]

It is possible in theory, but you would need to apply the animation above the appWithTranslation level. So you'd need to create another "animation HOC" and wrap:

const MyApp = () => { ... }

export default appWithAnimation(
  appWithTranslation(MyApp)
)

[belkocik]

OK thank you. I'll try it but first gotta learn how to use HOC.
// edit: HOC doesn't apply an animation ;/