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:
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.
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.