Problem displaying animations in Storyline 3 with html5-only publishing

May 31, 2017

Hi - we're having trouble with animations in html5-only publishing from Storyline 3. Our old swf animations aren't working with html5-only obviously, so I've been changing them to .mov files. They work, but intermittently and randomly they have grey boxes around them. They don't do this all the time but there doesn't seem to be any pattern. The same published SL3 file with the same animation on the same panel will sometimes show the grey box and sometimes won't. Because of this, I've started switching to animated gifs instead but that has its own display problem. The gifs will often appear pixelated, as though there's electricity shooting through the animation. These are simple animations downloaded from PresenterMedia. For the gifs, I turned off transparency. I tried with small, medium and large versions - changing the size, not changing the size, it doesn't matter - they all pixelate. So I either need the gifs to not do that or the .mov files to not have the random grey box. Suggestions are appreciated.

37 Replies
Alyssa Gomez

Hi Ramon, 

Thanks for chiming in, and really sorry you're running into a problem with your GIF files. A few different issues were mentioned in this thread, such as a gray border around GIFs and pixelation issues. 

  • Can you tell me a bit more detail about the issue you're seeing in your file?
  • What version of Storyline are you using?
  • Are you seeing the problem in Storyline preview, or after publishing the project?
Katie Riggio

Great news, everyone!

I'm excited to note that we just released update 3 for Storyline 3! You can view all the new features and fixes here.

One of the fixes addresses an issue where GIF images would appear distorted in HTML5 output.

Here’s where you can download and install the latest version of Storyline 3. Let us know if you have any questions!

Alyssa Gomez

Hi there June!

Sorry you're seeing a purple outline around your .gifs. We've seen the same problem, and it has been tricky for us to nail down.  We are seeing a difference between .gifs with transparency and .gifs with solid backgrounds.  The transparent .gifs (like a .png image) seem to produce the purple outline. Are you using a transparent .gif?

Lauren Connelly

Hi everyone!

Thanks for bringing this bug to our attention and the workarounds you’ve tried in Storyline 3!

I quickly wanted to share that we aren’t seeing this bug occur in Update 36 (Build 3.36.21213.0) for Storyline 360! If you've upgraded to Storyline 360, you'll need to update the Articulate 360 desktop app to stay up to date with the newest bug fixes.

For those who are still using Storyline 3 and subscribed to this discussion, you'll be notified when we share the fix for Storyline 3!

In the meantime, if you would like to see the fix first-hand, you can sign up for a free trial of Articulate 360 trial here right here. We'll create backup copies of any Storyline 3 files, so you can always continue to use them in this version.

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