I am trying to animate an image with Framer Motion:
utils/MonkeyPicture.js
import React from 'react';
const MonkeyPic = () => {
return (
<div>
<img
transition={{ duration: 0.5 }}
animate={{ rotate: [0, -30, 0]}}
id='monkeyFace'
src='/images/Monkey.png' />
</div>);
}
export default MonkeyPic;
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.
The picture is rendered the whole time, I just wish to rotate it when I click a button.
The onClick method is in the AddTodo.js container:
<button id='addTodo' onClick={() => {
monkeySound.play();
setShowFistBump(true);
setTimeout(() => {
setShowFistBump(false);
}, 1000);