Gif purple outline and some do not display

I too was experiencing this issue with animated GIFs that I had placed into a recent project, the outline was showing a faint purple line that I couldn't seem to get rid of, whether viewed on the desktop or uploaded to my web server as suggested above.

BUT I found a very bizarre solution!

If you use the crop tool in Storyline on your image just to take off a tiny bit off the edge (so for example keep a little bit of space at the edge of your GIF so that that you can crop it out in Storyline) then all of a sudden when you preview the project the purple lines are all gone!

That is certainly an odd solution, but glad it worked for you and I'm certainly glad you popped in to share in case it can help others in the future :)

Hi there, can confirm the method Chris used as a quick-fix for purple-lined GIFs. There is a big change in outline simply by randomly cropping.  Thank you!

Thanks for confirming that it worked for you, Kyle! 

Yo estoy usando un gráfico para animar hacer parpadear mi personaje, pero el personaje tiene este color. Este color no lo muestra , solo me muestra la linea negra. Probe con muchos colores y todos funcionan pero este color en especial no lo muestra. Algun desarrollador de Storyline que sepa porque puede pasar esto? es que Storyline en su codigo de programación considera este tono de color para transparencias?

norteo es problema del GIF animado ya que en otros software funciona perfecto.

gracias

Hello Juan,

Looks like I just responded to a similar post here.

Just wanted to link the two for anyone following along.

Hi Leslie,

I'm having the same problem and I was wondering if there are any other solutions besides cropping? I need to have the project published in HTML5. When I open the gif in Edge or Chrome it appears normal as you can see below. In the Storyline timeline it also appears normal. The bright purple outline only appears when I preview or publish it. 

Are there some best practices in regards to the export settings of gifs? I'm exporting out of Photoshop so I have some flexibility if there is anything I need to watch for. Thanks!

Hi Colin,

Our team has been looking for a sample GIF to try and recreate this, and it doesn't seem that we have one yet. If you're able to upload one for us that is behaving oddly for you, we'd love to take a look!

Hi Ashley, 

Thank you for the quick response! I've attached the .gif. As iterated in my previous message the gif should look fine if opened in a browser directly.

In Storyline I created a new project, Went to (Media) Picture > Insert > Picture from file.

Then published Entire Project. 

This should recreate the issue. Hope it helps! 

Thank you.

Colin,

Have you not tried cropping the image as I have suggested in my answer above? Even just cropping the GIF in Storyline ever so slightly on the edge will make a huge difference when you come to preview or publish.

Hi Colin,

Thanks for sharing the GIF file with us. I saw the purple border when I inserted it on a Storyline 360 slide, and cropping the GIF didn't seem to solve the issue. I'm going to share this with our Support Engineers for a second look, so keep an eye out for an email from them soon!

Just having this issue now, strange..

Sorry you're seeing the purple lines too, Mike! We've got this behavior logged as a software bug now, and our team is looking into next steps. 

This discussion is added to the associated report so that we can keep everyone here posted on this bug's progress! Thanks to all for bringing this to our attention, and I'm really sorry it's slowing you down!

I wonder if the latest update for 360 might have fixed the purple line bug on animated GIFs.

I've just tested it on one particular project on my end and it seems to be OK. Is anyone else able to test it out and confirm?

Hi Chris,

The issue is still open with our team - but if you're seeing it fixed, I'd love to know a bit more. Can you share a copy of the .story file here with our team? 

Still the purple lines. Would love this to be fixed!

Hey Mike,

Would you be able to share the gif that's giving you trouble?

This one has been hard to replicate, but seems specific on the gif used. 

Curious if you downloaded your gif from a website as well or what you used to create it.

I too have purple lines on gifs. These gifs were created using Adobe Animate CC. I've attached one. Cropping the gif didn't work either. It seems to happen if you resize the gif (make it smaller) the purple lines appear? 

Hi Elliot,

Thanks for sharing this example - you mentioned resizing, and I wanted to check if that was when you inserted it into Storyline or if you're resizing it first in Animate and then seeing the oddness in Storyline? 

Hi Ashley,

Yes, if you resize a gif in Storyline, and make it smaller. Then preview/publish, you'll see a purple outline.

I got around this by going back to Animate CC and resizing the GIF export and then importing to Storyline but this is a long way around to ensure the correct dimensions.  I use quite a lot of dynamic elements in my learning resources, Is there a timeline for when this bug will be fixed?  Thank you in advance 

Ok, heres an example. It does not matter the software the .gif is made in. Does it with Animate, Photoshop and CrazyTalk animator. 

• Hi there, Mike.  I'm really sorry that this 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, like with your dog .gif example. 
  
  The purple outline right now occurs with HTML5 output.  Our team does have this issue on the radar, so I appreciate you sharing your example.  It helps us narrow our focus!
  
  
• Hi Elliot, and thanks for clarifying.  I'm seeing the same behavior with those steps you described.  I believe it's related to the transparency of the .gif.

I've updated our report on this issue, and I'll make sure we share new information here with you.

Hi Chris,

Thanks for sharing this tip. 
Could you provide an concret example in attchment, please?

I tried to crop my GIFs without success.

Thank you!