Closed jwl-7 closed 2 years ago
You saved me for this one! Do you know how to import "anime" though? Like "anime.stagger(100)"
Anyway thanks
Edit: Well, nothing seems to work on an almost fresh install, I got to Framer Motion instead, what a relief!
@DarioLopes you can just use the vanilla import for access to anime
-- like so:
const Anime = dynamic(() => import('react-anime'), { ssr: false })
import anime from 'animejs'
<Anime opacity={[0, 1]} translateY={'1em'} delay={anime.stagger(500)}>
<p>hello world</p>
</Anime>
@timfee Oh well, thank you, I'll give it a try!
@DarioLopes good luck! FWIW, I ended up just using animejs
directly:
const ref = createRef<HTMLDivElement>()
useEffect(() => {
if (ref.current)
anime({
targets: ref.current.children,
delay: anime.stagger(130),
translateY: '0.5em',
opacity: [0, 1],
duration: 500
})
}, [ref])
<div ref={ref}>
<p>hello world</p>
<p>goodbye world</p>
</div>
Importing react-anime results in:
SyntaxError: Cannot use import statement outside a module
Import statements used:
Trying out the latest package on npm using RunKit results in the same error: https://npm.runkit.com/react-anime
I am using Next.js with JavaScript.
EDIT: I ended up fixing this issue by using Next.JS Dynamic Imports. I believe it has to do with how the 'window' element is undefined in the development environment.
Here is the import statement I used to fix the issue: