(Animated) GIF can’t have states in HTML5 ?

Not sure if it will make a difference, as I haven't tried working with gif animations in SL2, but have you tried putting your animations on their own layers and just having them show the layers with the buttons instead of states? Because you can make animations on layers but you can't make them on states. So maybe that will allow it to work on all browsers.

Hi, Quentin -- Thanks for your question! Please give Daniel's suggestion a try, and if you would still like additional input, feel free to share your .story file here for additional input from the community. :)

Hey Quentin, I decided to test an animated GIF out of curiosity. I put the GIF into a "Slide Layer" and made a button on the Base Layer to reveal the slide layer. It plays the animation just fine and loops it.

I'm imagining it will loop as long as it is visible and has no bearing to the timeline as to when it will stop unless you play the timeline to a point where it will no longer be visible. Or, if you pause the part of the timeline that the animated GIF occupies and the GIF is set to loop, then the GIF will continue to loop even though the timeline is paused.

Example is attached.

Thanks so much for the explanation and the sample you provided, Daniel! 

Hi Daniel,

Thanks a lot for your contribution! And sorry for this late answer I was really too busy.

Unfortunately, we can’t use the ‘layer solution’ because we already have many layers in our real project which is pretty large… Thank you anyway for trying to solve this problem!

Meanwhile I may have found a workaround (still need to make tests):

• use any basic shape that will never show (blue rectangle in the example below)
• create new states for your GIF images
• Set the initial state to the GIF you want it to show (Hummingbird in the example)

You can then change to the state you want!

I will upload a sample here in the coming days.

Cheers!

Looks great, Quentin -- thanks so much for sharing your workaround, and we'll look forward to seeing your example when you are able to provide it. :)

Dear all,

Here is the sample. I inserted a basic rectangle shape and create states A to F where I deleted the rectangle and inserted GIF (see screenshot below), and added buttons to change the state of the rectangle.

It seems to work, but I still have 2 issues.

1. On Ipad using Safari, I does work but I have this giant ugly play button (is there a way to skip it ?):

2. I don’t know why some GIF have a short blinking line at the bottom right of the image (D, E, F in my example).

Anyone can give me a feedback with other devices (Android tablet, Windows tablet,…)?
Here is the link to try: http://s285783992.onlinehome.fr/sl/RandomGIF/story_html5.html

Thanks a lot.

Hi Quentin,

Thanks for sharing here. There isn't a way to get rid of the play button when using mobile safari. That's the normal expected behavior. 

As far as the blinking line, I do see that in the HTML5 output in Chrome on my desktop as well. As for testing it on the Android - is there particular feedback you're looking for there?

Hi Quentin! 

Thanks for sharing.

The play button on tablets is expected behavior. It is a limitation of the mobile browser, not your course.

I'm not sure if that blinking animation is due to something in the actual file you are sharing as it looks like it could be the edge of the actual window, right?

I did take a look at the course on an Android tablet and it looks great. Not sure what feedback you were wanting there.

Perhaps others in the community will be able to assist you.

We do typically advise that you share the story.html course. You can read more about that here.

Thank you Ashley and Leslie.

I just wanted to know if it works on mobile devices.

As for the blinking line, it seems it is related to the original GIF file (frame rates, looping,...). It does not happen with the Flash version :
http://s285783992.onlinehome.fr/sl/RandomGIF/story.html

I am still investigating and will let you know.

Thanks Quentin!

After several tests, we came to the following conclusion : GIF images with transparency will always have a short line at the bottom right. That is why my D, E and F images above have this line and not A, B and C.

You can still hide this line with a small shape filled with the background color or pattern. But it will give you extra work. We are unfortunately working on a large project with several GIF :-(

You can check this example: http://s285783992.onlinehome.fr/sl/Untitled1/story_html5.html

Have a nice weekend!

You as well Quentin! Thank you.

Thanks Quentin for the update - hope you have a great weekend too. 

Hey Quentin, I'm curious to know if you were able to import any animated gifs into SL2 that did not loop? Meaning they just play once and stop.

Hi Daniel,

For you for your contribution. I guess you want a GIF image to stay at the last frame after playing once. I just tried with a few samples and it indeed did not work! You can still find workarounds (export the last frame to a JPEG and use trigger), but this is not convenient...

It sounds there is room for improvement in the integration of GIF in SL, hope this will come with the next updates.

Hi Daniel!

Our QA Team is aware of an issue with the looping. I will add this thread for their awareness and so that I can provide an update when applicable.

Workaround - convert the animated gif into an mp4 and then insert that instead of the gif.

Thanks for your replies. The first thing I thought to do was to extend the time of the last frame of the GIF. But this doesn't solve the problem as when the slide replays, it does not restart the GIF from the beginning. I've tried resetting the slide by "Resetting to initial State", but this does not force a replay from the beginning of the GIF.  I think through the use of Javascript there is a way to force the GIF to start over every time the slide is revisited. I haven't looked into it yet but will in time. Otherwise, it would be so very awesome to have that be part of SL!

Thanks for sharing Daniel :)

Hi all, 

I wanted to share some additional information here regarding the release of Update 8 for Storyline 2. We shared with our team the high priority of the GIF looping issues brought to us by so many users in this thread and others, and it was initially targeted to be included in this update. During the testing phase of an initial fix, one of the examples here where the GIF was to be brought in at approximately 12 seconds opened a bit of a Pandora’s box in terms of alternate scenarios for when, how, and what would happen to the GIF based on triggers, timeline elements and states. As our team continued to deconstruct the complexities of this, we still had a number of really crucial fixes and we felt it was important to get in the hands of customer sooner rather than later. With that in mind we chose to release Update 8 as our team continues to evaluate all the GIF looping scenarios and look towards possible solutions. I’ll continue to share information here as it’s available and feel free to let us know if you have any questions.

Hi all,

I wanted to provide an update here, as Storyline 2 Update 10 was just released, and included a number of fixes which you can see in the release notes available here. The items you all may be particularly interested in are the following:  Fixed issue where a non-looping GIF would unexpectedly loop in Storyline and it fixed the issue where an animated GIF wouldn't always start playing at the beginning of the animation when it appeared on the slide. You can download the latest update here, and after downloading and installing the latest update you’ll want to republish any existing content to ensure that the updates and fixes are applied.

Let us know if you have any questions, either here or by reaching out to our Support Engineers directly.