Working with animated GIFs in Storyline

Nov 05, 2015

I'm currently working on an "interactive resume" which has a portfolio section in it.  This has really been an extension of my increasing interest in creating something that showcases some of my design that I could use for marketing purposes - the project is coming along nicely, but I've run across a technical issue...

I found an online animated GIF maker and have made up 8 animated GIFs of the screens in some of my ELH challenge entries.  This took a little bit of work to get all the screenshots together, but I think the result is close to what I'm after as far as being able to quickly show the slides in an interactive project.

Each of these GIFs is on a separate layer that is reached through a trigger from the base slide - my dilemma is that the GIF starts playing before this trigger sends the learner to the relevant layer by clicking on an image, so when they reach each of the layers, the animation has already started and the learner misses the first screenshot at the very beginning of the GIF.  

My query is, does anyone have any clue as to how I could set this up so each of the GIFs don't start playing until the layer is viewed?

Here is a link to the published version of this project:

https://dl.dropboxusercontent.com/u/31851006/ANIMATED%20GIFs/Interactive%20Portfolio%20-%20Animated%20GIFs%20-%20Storyline%20output/story.html

And here is a link to the source file is anyone has a minute to have a look at this for me.

https://www.dropbox.com/sh/b98gpiaq0hn2ta5/AAAawsurG71psvdzQ1Fz8cUAa?dl=0

Thank you!

(BTW - I haven't finished playing with the design yet - I really wanted to work on how I can "expand" the portion of the image to the full image on each layer before it flies out and the animated GIF flies in - obviously this is still a WIP!)

If you're interested in experimenting with animated GIFS, I highly recommend this site: http://ezgif.com/maker.  You can upload up to 400 images at one time and create an animated GIF, adjust the speed and save the file for use in projects, on websites, etc.

7 Replies
Dianne  Hope

Thanks for your prompt response Phil.  I didn't want to go down the path of setting up complicated triggers and conditions if it could be solved more simply.  I thought it may be something to do with layers, but even separating out the layers onto separate slides didn't work.

Here's the right link to the source file:

https://www.dropbox.com/s/n3mlz6g6p0d8trh/Interactive%20Portfolio%20-%20Animated%20GIFs.story?dl=0

I'll try your suggestion and let your know how I go.

Matthew Bibby

There is no way to control the timeline of a GIF. Even changing from a hidden state to normal makes no difference, they just run along happily even if they can't be seen!

I think video is the best option in this case, especially as the quality of the GIFs isn't the best (which negatively reflects on your portfolio.)

Dianne  Hope

Thanks for your responses Nancy and Matthew.  I've tried your suggestion Nancy - they are stubborn little critters those animated GIFs.  As Matthew pointed out, they do seem to run along happily even when they're not in view!  

I started this project by incorporating still screenshots, then moved to video of each portfolio item - but ultimately, both of these take a significant amount of time and don't produce the clean effect I was after.  I had hoped the animated GIF option would work, particularly as the site I found to produce the GIFs is so easy and convenient to use.  

Oh well, back to the drawing board!  I think a re-design might be in order...

This discussion is closed. You can start a new discussion or contact Articulate Support.