title: React: Framer Motion / onClick activate only the animation
body: <p>I am trying to animate an image with Framer Motion:</p>
  <p>utils/MonkeyPicture.js</p>
  <pre><code>import React from 'react';
  
  const MonkeyPic = () =&gt; {
  
          return (
              &lt;div&gt;               
                    &lt;img
                      transition={{ duration: 0.5 }}
                      animate={{ rotate: [0, -30, 0]}}
                      id='monkeyFace'
                      src='/images/Monkey.png' /&gt;
                                 
              &lt;/div&gt;);         
  }
  export default MonkeyPic; 
  </code></pre>
  <p>So I would need a function that only adds or activates the atributes:
  transition={{ duration: 0.5 }}
  animate={{ rotate: [0, -30, 0]}}
  When I click on a Button.</p>
  <p>The picture is rendered the whole time, I just wish to rotate it when I click a button.</p>
  <p>The onClick method is in the AddTodo.js container:</p>
  <pre><code>            &lt;button id='addTodo' onClick={() =&gt; {
                  monkeySound.play(); 
                  setShowFistBump(true);
                  setTimeout(() =&gt; { 
                      setShowFistBump(false);
                  }, 1000);
  </code></pre>