title: How to stop react-spring looping animation
body: <p>I have a pulsing simple Timer. I want to stop pulsing animation when the time hit &quot;0&quot;. I am kinda new to the react-spring if anyone know how to do this please help.</p>
  <pre><code>const Timer = ({time = 0}) =&gt; {
      const [timer, setTimer] = useState(time);
  
      const props = useSpring({
          config: {duration: 1000},
          from: { scale: 1 },
          to: {scale: 1.1},
          loop: timer &gt; 0,
      });
  
      useEffect(() =&gt; {
          if (!timer) return;
  
          const intervalId = setInterval(() =&gt; {
              setTimer(timer - 1);
          }, 1000);
  
          return () =&gt; clearInterval(intervalId);
      }, [timer])
  
      return (&lt;animated.div style={props} className={'timer-main'}&gt;
          { timer }
      &lt;/animated.div&gt;)
  }
  </code></pre>