1

I need to create multilanguage site and I need to use framer motion to use animations and page transitions.

I've used the most popular gatsby plugin for multilanguage functionality gatsby-plugin-intl. To implement page transitions I've used method mentioned in this article. I've used

export const wrapPageElement = ({ element }) => (
    <AnimatePresence exitBeforeEnter>{element}</AnimatePresence>
)

in gatsby-browser.js and then wrapped content of layout in:

<motion.main
    initial={{
        opacity: 0,
        x: -200,
    }}
    animate={{
        opacity: 1,
        x: 0,
    }}
    exit={{
        opacity: 0,
        x: 200,
    }}
    transition={{
        type: 'spring',
        mass: 0.35,
        stiffness: 75,
        duration: 0.3,
    }}
>
    {children}
</motion.main>

Without using gatsby-plugin-intl everything is working like it should:

enter image description here

But when I start to use the intl package and since I change Link component from

import { Link } from 'gatsby'

to

import { Link } from 'gatsby-plugin-intl'

Presence animation of framer motion stops working. There is no any animation when component unmounts.

enter image description here

I've searched a bit about that and found pull request on github. Since that time code of package was changed and the problem still exists.

Now code of intl's package Link looks like that:

return _react.default.createElement(_gatsby.Link, (0, _extends2.default). 
({}, rest, {
  to: link,
  onClick: handleClick
}), children);

How to fix that?

P.S. yarn add gatsby-plugin-intl installs version 0.3.3. The latest version in github repo is 0.3.1. Code which is installed differs from the code in repo.

John Smith
  • 922
  • 14
  • 34

0 Answers0