title: How to make animation in react js?
body: <p>I want to make some images appear one after the other after some delay. This is what I tried:</p>
  <pre><code>//File name - Options.tsx
  import { keyframes } from &quot;@emotion/react&quot;;
  import styled from &quot;@emotion/styled&quot;;
  import { useState } from &quot;react&quot;;
  
  const moveInRight = keyframes`
  0% {
     transform: translateX(50px);
  }
  
  100% {
     transform: translateX(0px);
  }
  `
  
  const ImgWrapper = styled.div`
    animation: ${moveInRight} 1s ease-in-out .3s both;
    animation-delay: ${delay}s;
  `
  
  function Options () {
     const [delay, setDelay] = useState&lt;number&gt;();
  
     const options = option.map((item, i) =&gt; {
        setDelay((i+1)*0.2);
  
        &lt;ImgWrapper&gt;
           &lt;img src=&quot;item.path&quot; /&gt;
        &lt;/ImgWrapper&gt;
     )}
  }
  
  return (
      &lt;&gt;
          {options}
      &lt;/&gt;
  )
  </code></pre>
  <p>However my code is not working as it should. Any ideas on how to do it?</p>
  <p>And I am also getting this error <code>Uncaught ReferenceError: Cannot access 'delay' before initialization</code>, which is obvious.</p>
  <p>I also applied style to the image -</p>
  <pre><code>&lt;img style={{ animationDelay: `${i+1}s` }} /&gt;
  </code></pre>
  <p>But this way all the images are appearing at once. Not one after the other. I would be grateful for any ideas. How would I go about adding a different delay for each image?</p>