I've created a gif that I want to use for my sprite, but I'm having trouble getting it to play only when the character moves. Currently, I have a rectangle with choppy movements and I'd like to make them smoother. Despite watching numerous tutorials, I haven't found one that shows me how to achieve what I want.
Below is the code snippet (CSS can be ignored)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#backgroundColor {
width: 100px;
height: 100px;
background-color: white;
animation-name: backgroundChange;
animation-duration: 45s;
animation-iteration-count: infinite;
}
@keyframes backgroundChange {
/* Keyframe animations */
}
#canvas{
/* Styling properties for canvas */
}
</style>
<title>Bermuda Triangle</title>
</head>
<body id="backgroundColor">
<img id="character" style="height: 40px; width: 40px;" src="path/to/your/gif/image.gif">
<canvas id='canvas'></canvas>
<script>
// JavaScript code goes here
</script>
</body>
</html>