Types.js - Stop Gif Animation

Authoring Twine
1

So I have a gif and I would like its animation to be in sync with the typing animation, so that when the typing animation stops the gif animation would stop also. I just don’t know how to go on about it; I know that I would have to use the $(document).on(':typedcomplete', function () but that’s about it. Here’s some of my code if that helps:

<div id="txt" class="op"><span class="typed-speed12"><img src="avatar.gif" id="avatar" alt="Avatar">
\blah blah blah</span>
<div id="icon"><a data-passage="2" class="link-internal image-link"><img class="cont" src="down-arrow.png"></a></div></div>
2

If you’re basing this on some code you got somewhere else, could you please link to it? It’s hard to answer the question without that.

3

There are libraries for programmatic GIF control but they work by splitting GIFs frame by frame to static images and then playing animation by swapping the frames very quickly. Just find something and call the ‘pause’ method on an object constructed from the image. Or maybe you can just take a static image from the GIF and swap your animation to that on typedcomplete event you found.

1 Like
4

I did the latter of what you said, and it works! Here’s what I did:

$(document).on(':typedcomplete', function () {
	$("img#avatar").attr("src","static.png").load;
});
5

Simply changing the src is sufficient to do what you want. You don’t need the .load (<jQuery>.load()) method there. Not only is it unnecessary, but you’re just referring to it, rather than invoking it, so it’s not actually doing anything anyway.

I.e., the following is what you want:

$(document).on(':typedcomplete', function () {
	$("img#avatar").attr("src","static.png");
});
6

Ah, ok. Thanks!