How do I change a gif in react with a continious running loop?

user_10810240 0
Viewed 39

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?

reactjs gif html javascript
1 Answers

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

user_190457710
Related