Jump to content
Search Community

Converting to gif causes loss of svg fill colors

Pcooney test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have an animation that the client would like in video format so I followed along  @OSUblake guide of how to create a gif using plunker. I managed to get everything together and operating but the frames I get for the gif have no styling, specifically fill colors for the svg elements so they just appear black. How can I fix this issue?


Current stage: http://plnkr.co/edit/bIbF20itbdtVnbeSlL5t?p=preview

See the Pen by edit (@edit) on CodePen

Link to comment
Share on other sites

Seems like you just dropped your animation in there and expected it to render automatically, following are some of the things you need to fix,


1. Your animation is made up of multiple svgs, In @OSUblake's demo he uses single svg as source.

2. All your style must go directly in svg, because in javascript only SVG Markup is getting extracted so canvas is not aware of what is happening inside svg.

3. You are rotating svg element itself but it won't help you, you must animate elements inside svg. Which cause svg markup to change and it gets captured by canvas. Otherwise no animation will get rendered because SVG is not changing from inside.

4. In his javascript he is using animation variable to assign Tween to it so that it can be used to extract frames, in your example you are using animation in different file so you will never get output you want because code is tracking different animation.

5. Your SVG's have different viewbox size, in his example his svg viewbox is 350x350 and canvas is of same dimension so basically your viewbox and canvas should be of same dimension.

6. He is using a white rect as background otherwise canvas will render black background.


Following is just tiny bits I edited here  and there but you get the idea,



  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...