title: Slideshow effect with Framer Motion
body: <p>When some prop in my component changes in framer motion, I would like to fade that property out, then fade the &quot;new&quot; property value in?</p>
  <p>Here's the timeline of the animation as I imagine it:</p>
  <ul>
  <li>0: Prop Value Changes, old value start to fade out</li>
  <li>.5: New value visible</li>
  <li>1: New value finishes fading in</li>
  </ul>
  <p>But the only way I see to do this with framer is to use Timeouts. Is there some way other than using timeouts to achieve this effect?</p>
  <h1><a href="https://codesandbox.io/s/framer-motion-slide-effect-kddel?file=/src/App.tsx:0-806" rel="nofollow noreferrer">Codesandbox</a></h1>
  <pre class="lang-js prettyprint-override"><code>import { motion } from &quot;framer-motion&quot;;
  import { useEffect, useState } from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  export default function App() {
    const [seconds, setSeconds] = useState(0);
    const [anim, setAnim] = useState(&quot;in&quot;);
    useEffect(() =&gt; {
      const interval = setInterval(() =&gt; {
        setSeconds((seconds) =&gt; seconds + 1);
        setAnim(&quot;in&quot;);
        setTimeout(() =&gt; {
          setAnim(&quot;out&quot;);
        }, 500);
      }, 1000);
      return () =&gt; clearInterval(interval);
    }, []);
  
    const variants = {
      out: {
        opacity: 0
      },
      in: {
        opacity: 1,
        transition: {
          duration: 0.5
        }
      }
    };
  
    return (
      &lt;motion.div
        animate={anim}
        variants={variants}
        className=&quot;App&quot;
        style={{ fontSize: 100 }}
      &gt;
        {seconds}
      &lt;/motion.div&gt;
    );
  }
  
  </code></pre>