CODEWITHSUNDEEP
reactjsframer-motion
Max
Max

Reputation: 147

React - Framer motion: prevent initial prop from triggering

I have a basic CRUD application where I'm able to add and remove items on a list, which is animated. This works well with framer-motion, but I'm having troubles with the following:

Whenever I delete an item from the list, the following function is called:

const handleDeleteFormation = async (id) => {
    await axios({
        method: "DELETE",
        url: `http://localhost:1337/formations/${id}`
    })

    getFormations()
}

As you can clearly see, I'm calling the getFormations() function after the deletion to re-render the updated list:

async function getFormations() {
    const res = await axios.get('http://localhost:1337/formations')
    setFormations(res.data)
    console.log(res.data)
}

This will results in a re-render of the list, which is good. But... right after the re-render, the initial prop of the motion.div will be triggered again which results in conflicting visuals.

<AnimatePresence exitBeforeEnter initial={false}>
            {formations && formations.map((formation, index) =>            
                <motion.div
                    key={formation.id}
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }} 
                    exit={{ opacity: 0, x: -10 }}
                    transition={{ type: "tween", ease: 'easeOut', duration: 0.2 }}
                >
                    ...

My question: is it possible to prevent the initial prop from triggering right after the list-update?

Upvotes: 0

Views: 2285

Answers (1)

Cadin
Cadin

Reputation: 4649

You're looking for <AnimatePresence initial={false}>.

From the docs:

Suppressing initial animations

By setting initial={false} on AnimatePresence, components present when AnimatePresence first loads will start in their animate state. Only components that enter after this initial render will animate in.

Upvotes: 1

Related Questions