I'm running into a few animated GIF issues with HTML5 output (testing in Chrome/Firefox). 1. I have an animated GIF that is 41Kb and 538 by 379. When I put it in as-is in Storyline and publish, the HTML5 version does not show me the animated GIF, instead showing me a blank image box. I've done some testing and if I scale the GIF down to maybe 50% height/width in Storyline and republish, then it works. Of note is that my quality settings are at 100% for images. If I leave the GIF at 100% and change the quality setting to 99%, the HTML5 version does show the GIF. Is there a reason animated GIFs are not working correctly with the highest possible output quality setting? 2. I've tried putting in animated GIFs that are not repeating. They work fine in the Flash output, but in HTML5, the animation repeats indefinitely. When I view the GIF in a browser, it only plays once as it should. Is there anything that can be done about this? 3. This is minor, but animated GIFs are slightly distorting colors and putting a couple pixels of magenta at the bottom right of the GIF after being published in Storyline. This doesn't seem to happen with every GIF but ones that have a bit more complexity to them. Any way around this? Thanks! Keith

Hi Lawrence. The image quality of the transparent GIFs isn't that great, but I found a work-around. You can put a little square in the lower-right corner of the GIF in the Storyline file and fill it with the color you need to hide the magenta pixels.I personally decided that using GIFs isn't an option at this point for the project I had to provide an estimate on. Articulate, please give us some animation shape tweening tools in Storyline like Flash/Animate has.

I too am having issues with this. I have actually reduced the size of the .png in Photoshop when creating/exporting to Legacy of the .gif and I get the magenta pixel in the bottom corner. Also, the .gif causes a very noticeable "hiccup" or lag in the course when being viewed. Lastly, this problem has been around for YEARS!! It isn't new. If it existed in SL2 and quite obviously is in SL3 and SL360 (what I'm using), then why isn't it being addressed more seriously? Com'on Articulate, you've got to be better than that. Too many people/companies are trusting you with their livelihood.

Bumping to share that I'm having this same issue. It seems that no matter what image quality settings I specify—or how I size/export them—my .gifs look downright terrible. Also experiencing the strange magenta pixels.

Bumping this too. Storyline360 seems to have many issues with GIFS (visual glitches, odd playback, massive files when published). For software as expensive as 360 is these issues should either not occur or should at the very least be fixed quickly. It is especially annoying as the E-Learning Heroes frequently feature articles about using animated gifs with no indication of any of the issues that developers are likely to encounter when they try to get gifs to work in their courses. It is understandable that many developers look to gifs to bring animation to their work as Flash is no longer a viable option and Storyline's in-built animation is limited. However given all the issues that many developers have been reporting for months/years I don't think Storyline can justifiably claim to truly support the use of gifs. It would be really helpful to have some clarity on this. Clarity about what is being done to address these longstanding issues. Clarity about any reliable guidance that can be given about using gifs at the moment (clear best practice, what works, what doesn't, any reliable work arounds) . Developers should not have to go trawling through the forum to pick up the odd anecdotal tip here and there. I hope the sense of frustration that I and other developers have about this subject matter has registered with Articulate. Either sort it out or be clear that you do not support the use of gifs.

So true Conor! Articulate, this issue with the small box of 1 by 2 pixels in the bottom right of the GIF that's magenta colored was first brought to your attention over four years ago. Management should remove the option to import GIFs from Storyline 3/360 as this doesn't work or FIX THE ISSUE and not keep saying it's on your list.

Animated GIF issues in HTML5 output | Articulate

AshleyT-Pollard
Staff
11 years ago

Hi Keith,

First, I'm curious what update of Storyline you're using as the red or pinkish hue, is something that we fixed in update 2 detailed here.

In regards to your two other issues, it sounds like they're similar to the issue Justin worked on in this thread and has been reported to our QA team.
KeithK
Community Member
11 years ago

Hi Ashley,

We are using Storyline Update 4. Besides that, the issue you listed is different than the one I am encountering. In the issue I'm encountering the background of the GIF retains its transparency just fine, however there is a small box of maybe 1 by 2 pixels in just the bottom right of the GIF that's magenta colored. It looks like it gets put there when storyline publishes it, as this is the image from the published directory (check out the bottom right):

The other thread you listed is interesting, as the issue was resolved by putting image quality at 100%, whereas in my case we have already had it as standard at 100% and are only getting issues with animated GIFs when it's 100%. It's a bit of an issue as we don't want to have to sacrifice image quality of other on-screen images just to get an animated GIF to work.
AshleyT-Pollard
Staff
11 years ago

Hi Keith,

Thanks for the image - and sorry I missed this, as I was off for the holiday weekend.

Are you able to update to the current update 5 of Storyline? I don't see any specific fixes in update 5 related to animated gifs, but it's worth seeing how it would behave there as there in case there was something modified as a part of that update that may play a role.

If you're able to use update 5 and continue to see the odd pink pixel in the bottom corner and the remaining issues with quality, are you able to share your .story file with that gif here so we could take a look at it?
ParashuramVhava
Community Member
8 years ago
Hi Ashley,

I am using storyline 3 Update 1:3.1.12115.0

I am encountering the same issue with the GIF images when viewing HTML 5 output. GIF images are not displaying in HTML5, however, it's showing correctly in HTML version.
Ali_Goulet
Staff
8 years ago
Hey Parashuram!

This thread is a little older- so let's start from scratch with what you're seeing.

Would you mind sharing your .story project file here so I can take a look and do some testing? You can add it as an attachment right to a comment here.

Sorry you're running into this, and thanks for letting us know!
MelissaSuarez
Community Member
8 years ago
Hello, I'm having the same issue with the magenta pixels on html5. Are there any hints on what could be causing this issue ?
AlyssaGomez
Staff
8 years ago
Hi Melissa, thanks for joining the conversation!

Mind if I have a look at your file? Even one slide with a GIF would be helpful. You can attach it to a new thread comment using the Add Attachment button. Thanks!
- MelissaSuarez
  Community Member
  8 years ago
  Hello Alyssa, thanks for your reply.
  
  I figured out that the gif files that have this magenta border are the ones that have been downsized (as you will see on the attachment)
  
  If you have any clues on whether or not you can downsize gif files and still have them to look right it will be appreciated.
  
  Best,
  
  M.
  GifMoche.story110 KB
AshleyT-Pollard
Staff
8 years ago
Hi Melissa,

Could you share more about the "magenta pixels"? Is that the only piece or color of your animated GIF that's not showing correctly? I can't say that we've seen that - but I'd love to take a look at one of your projects and test from there!

If you'd like to sh are with our Support Engineers, they're happy to look too! You can upload a copy of your .story file here.
DanielLombar116
Community Member
8 years ago
We are having issues with HTML5 export and GIF in Firefox - the GIF is fine in Chrome. Got anything?
AlyssaGomez
Staff
8 years ago
Hey Daniel, thank for joining the discussion. What version of Storyline are you using? What exactly is happening to the GIF in Firefox?