Using useAnimation hook from Framer inside Array.map

Question

I've been playing around with Framer for the last couple of days. Currently I'm trying to animate a group of 3 icons. The first animation is to fade them in from the bottom, each icon with slightly bigger delay then the one before. The second animation is to fade them out horizontally. I've setup my animation variants like the code below:

const iconAnimationVariants = {
    fadeIn: i => ({
        opacity: [0, 1],
        y: [20, 0],
        transition: {
            delay: i * 0.1,
            duration: 0.6
        }
    }),
    slideRight: i => ({
            opacity: 0,
            x: 20,
            transition: {
                delay: 2 + (i * 0.1),
                duration: 1.6
            }
    })
}

Next, I use the code below to add the icons to my app and animate them.

const renderIcons = () =>
    icons?.map(({src, alt}, index) => (
        <motion.li
            initial='hidden'
            custom={index}
            animate='fadeIn'
            exit='slideRight'
            variants={iconAnimationVariants}
            className="intro-icon"
            key={index}>
            <img src={src} alt={alt} />
        </motion.li>
    ))

This works, at least the fadeIn part of the variant works. To have a bit more control I would like to use the useAnimation hook from Framer. For this I added the following:

const iconAnimation = useAnimation()

useEffect(() => {
    iconAnimation.start("fadeIn")
        .then(() => {
            iconAnimation.start("slideOut")
        });
}, [iconAnimation])

I also changed the code that renders the icons to this:

const renderIcons = () =>
    icons?.map(({src, alt}, index) => (
        <motion.li
            initial='hidden'
            custom={index}
            animate={iconAnimation}
            variants={iconAnimationVariants}
            className="intro-icon"
            key={index}>
            <img src={src} alt={alt} />
        </motion.li>
    ))

With these changes the icons do not animate at all. It seems like the iconAnimation is completely ignored when I use it inside an Array.map. I have a similar setup for a simple text animation where this works just fine.

Is there anyone that could explain this a bit or maybe point me in the right direction? Please let me know if you need any other information. Thanks in advance, Jeroen

Using useAnimation hook from Framer inside Array.map

0 Answers0