NextJS, framer-motion: How do I make an animation fire only on initial page load and reset every 12 hours?

Question

I have a website with a main page that loads in with a framer-motion animation. How do I make it so that the animation fires only on initial page load and not whenever I refresh the page/switch from one page back to the main page? I'm using NextJS so local storage is only available after the first render inside a useEffect() hook. Is there a way I can call a callback after a motion.div animation fires? I'm thinking of setting local storage after the animation.

Answer 1

According to the documentation , you could disable the animation (stop firing) by setting the value of initial props to false instead of your current animation properties (Same for the animate prop).

Set to false to initialise with the values in animate (disabling the mount animation).

Perhaps to achieve what you want, you could simply use a useState to solve:

const [runAnimation,setRunAnimation] = React.useState(false)

React.useEffect(()=>{
    /* Some logic to know whether the user has run animation before */

    const needToRunAnimation = ...

    if (needToRunAnimation){
        setRunAnimation(yourAnimationProperty)
    }
},[])

Then you could apply the runAnimation property to the framer motion component, to control whether the animation will fire.