I am trying to change the state of an animated a character on a website running in react. The character animations are stored in GIF files and I would like to be able to change the animation based upon user actions. I am thinking of implementing a continuous running loop that checks certain states to play the correct animation.
Does react offer this functionality? Or what would be the optimal way of doing this?
You can render a gif state (of the current animation), then update the state based on the users actions:
this.setState({gif: <url_to_gif>}) if using a class component
or const [GIF, setGIF] = useState(''); then setGIF(<url_to_gif>) if using hooks/function component
Place the code to set the gif wherever you are checking for a user action