Slideshow effect with Framer Motion

Question

When some prop in my component changes in framer motion, I would like to fade that property out, then fade the "new" property value in?

Here's the timeline of the animation as I imagine it:

• 0: Prop Value Changes, old value start to fade out
• .5: New value visible
• 1: New value finishes fading in

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?

Codesandbox

import { motion } from "framer-motion";
import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [seconds, setSeconds] = useState(0);
  const [anim, setAnim] = useState("in");
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((seconds) => seconds + 1);
      setAnim("in");
      setTimeout(() => {
        setAnim("out");
      }, 500);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const variants = {
    out: {
      opacity: 0
    },
    in: {
      opacity: 1,
      transition: {
        duration: 0.5
      }
    }
  };

  return (
    <motion.div
      animate={anim}
      variants={variants}
      className="App"
      style={{ fontSize: 100 }}
    >
      {seconds}
    </motion.div>
  );
}