I’m working in Javascript on an animated character whose mouth opens and closes when triggered with a key press. Here it is in action so far: https://foxproductions.tv/test
Pretty simple. On a keyDown event, I trigger a small video snippet ( (5 frames in length) that shows a mouth opening. On a keyUp event, the video is swapped out to show 5 more frames of a mouth closing.
The problem I"m seeing is that, upon triggering, the video’s first few frames get shown twice, so instead of a smooth open and close, the mouth seems to stutter a bit before it opens or closes.
Might anyone have a suggestion as to how to avoid repeating the frames?
Here’s the javascript:
<video id="mouthOpening" width="110" muted style="position:absolute; left:458px; top:220px ">
<source src="assets/mouthopening-short.mp4" type="video/mp4">
</video>
<video id="mouthClosing" width="110" muted style="position:absolute; left:460px; top:218px ">
<source src="assets/mouthclosing.mp4" type="video/mp4">
</video>
Thank you for any help you can offer!