Simple JavaScript code for SL2 to display an animated gif?


Can anyone provide the basic JavaScript code lines to display an existing 'Animated GIF' in SL2, including the control to play it ONCE then stop on the final frame and to control the speed of playback?

(SL2 continuously loops the animated GIF if I simply insert it as a 'Picture'.)

Many thanks for your help, Tim

21 Replies
Matthew Bibby

Hi Tim,

I'm not sure about using JavaScript to do this, but you should be able to set this up directly in Storyline.

Set up a trigger which opens a new layer when the timeline reaches 5 seconds (or however long your .gif is) and set the slide layer properties to pause the timeline of the base layer. 

This way, the .gif will play once, then pause. 

As for changing the speed of the .gif, that should really be done when you are creating it, but if it is too late for that you may have some success with this site.

Hope that helps! 

Matthew Bibby

Hmm, that's odd, but not surprising now that I think about it.  No worries, try this approach:

  • When the timeline reaches 3 seconds, change the state of the .gif to hidden.
  • Then, underneath the .gif, have a static image that shows the final frame of the animation.

There is no need for a pause layer in this setup and this approach will make things a lot easier if you have multiple animated gifs on the one page.

Hopefully that'll work!

Darren Heath

Rather than having another image on the stage you could have another state on the gif that is a static image of the last frame then change the state of the gif to that one.

Ive had the same issue with gifs not doing as they're told, and in HTML5 my gifs just do not appear at all (not sure if this is a known issue or just something with my files)

Ashley Terwilliger-Pollard

Hi all,

I know animated gifs have been an issue we reported to our QA team in that the frame rate is not respected upon publish as it's published as an SWF file. I don't have any additional information to share at this point, but will include this thread in the report that we have open with our team so that I can share additional information with you once available. 

Tim Neill

Thank you all for your suggestions. Changing the state of the animated gif at a cue point does then display my 'last frame' png image, but the animated gif (the 'normal' state) also keeps on looping, even if I pause the timeline at the same cue point. 

SL is completely ignoring the ('play once and stop') setting I made when I created this animated gif in Adobe 'ImageReady'. 

SL needs fixing.

But to go back to my initial posted question: 'Can anyone provide the basic JavaScript code lines to display an existing 'Animated GIF' in SL2'?  

As you will have gathered, I am not a JavaScript programmer but there must be a simple way to do this?

If I called it as web object, how exactly would I do this? 

Darren Heath

Sorry Tim I dont have a JS for your solution. I have uploaded a demo .story file with my gif to illustrate how mine work.

The normal state is my animated gif. Jump, Stopping and Stopped are static png files

In the story file, normal state runs until it reaches cue point 1 at 5 seconds then I have a trigger that changes state to Stopping.

At cue point 2 state changes once more to Stopped

Timeline stops at cue point 3.

Tim, can you upload your GIF and I'll have a look to see how yours differs to mine


Phil Mayor

Sorry Tim, There is no javascript solution.  If you want to embed as a web object add it to simple web page with your gif embedded saved to your desktop  (or anywhere on your machine) as index.html. Then insert a web object, navigate to your webobject and insert, all the necessary files will be attached to the project when you publish.

Tim Neill

Thanks Darren. I downloaded the test.story and can see what you're doing. It works well and your 'Normal' state animated gif stops playing and disappears at cue point no.1.

Here's my very crude animated gif test file, generated from a png in ImageReady. If I open this file in a browser, it plays once and stops on the last frame, as it should. 

I suppose the most likely problem is in my animated gif.

Darren Heath

Just tried that Tim as that sounds like a credible explanation.

In my solution to Tim earlier I used a custom state

I just tried it again. i put a static image in the 'disabled' state, trigger to change state at cue point. Storyline behaved itself and changed to the static image as I had hoped.

The mystery continues!!

Phil Mayor

Glad you got it sorted Tim, I think just be aware (instead of beware) of the way states were intended to work, I think selected and Disabled are the two states that do not work in an advice fashion from normal, and custom states do not at all.

Add this additive 'feature' can be very useful at times or a pain in the...

Depends on what you are trying to achieve.