title: How to animate on each state change using framer motion
body: <p>I thought on ever render framer motion would re-do my animation because the inital is set to hide and the animate is set to show. But this is not the case.</p>
  <p>How can I get this to re-play the animation on each state change ?</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { motion} from &quot;framer-motion&quot;;
  import styled from &quot;styled-components&quot;;
  
  const Screen = () =&gt; {
    const [state, setState] = useState(1);
  
    useEffect(() =&gt; {
      setInterval(() =&gt; {
        setState(Math.random());
      }, 4000);
    }, []);
  
    return (
      &lt;Title variants={variants} animate=&quot;show&quot; initial=&quot;hide&quot;&gt;
        {console.log(&quot;re-render&quot;)}
        {`screen ${state}`}
      &lt;/Title&gt;
    );
  };
  
  const Title = styled(motion.div)`
    color: red;
  `;
  
  export const variants = {
    show: {
      opacity: 1,
      y: 0,
      transition: {
        ease: &quot;easeOut&quot;,
        duration: 0.3
      }
    },
    hide: {
      y: -20,
      opacity: 0
    }
  };
  
  export default Screen;
  </code></pre>