GIF exports

[V1NAY8]

Expected Behavior

An option to make GIF.
Example : For any repo that can show their work effectively in their README file such as installation instructions.

Actual Behavior

Browser:

Code Snippet (If Applicable)

[mfix22]

@V1NAY8 have you tried https://getkap.co/ for quickly creating a GIF? I don't think it would be feasible to create one from the browser, unless you have ideas 🙂

[martinfrancois]

What would the advantage of a gif be compared to a png? A png can just as well be used in a README of a repo, or do you mean an animated gif? If so, what would you animate?

[V1NAY8]

• Just that carbon can be used for styling code. I wanted it also to behave as styling for Terminal or any UI.
• Animating the Instructions will always help.

Example for Code: If the same is done in Carbon It looks Beautiful

• These are nothing but a multiple output images from terminal.(If we could copy the output from terminal and paste it here and combine them). Just an Idea.
  
• png can be used to demonstrate just the code itself. But when it comes to gif. We can demonstrate multiple commands or instructions in the Documentation of a Repo.

[martinfrancois]

Ah okay, I see what you mean. Do you mean something like https://asciinema.org ? If so, how should it be different?

[V1NAY8]

• Oh yeah, That's such a beautiful one. As of now, that's the idea.
• The above is present only for terminal via the installation of a package.
• Thinking whether we can perform the same in Browser. https://getkap.co/ is the one suggested above, but its available for MacOs only.
  The main idea is to use Carbon to create a beautiful environment for sharing code, along with these integrations

[merpheus-dev]

I'd like to add another perspective to GIF support. I make tutorial videos and I want them to be pretty. So, I'm thinking about using carbon when I show a piece of code.

Although, having a window popping up animation would be great on that background which will produce either a GIF or a video file.
I think that can be a pretty good and needed enhancement.

[JessicaSachs]

I did a poor-mans approach to this on a fork carbon#feat/record-terminal-sesh using gif.js

There's a record button next to the settings. Press that and then all the keystrokes will be recorded and then "replayed" once you stop recording.

It's not polished. There are bugs and it is slow. It worked for my situation and lets me make pretty README gifs and twitter gifs, so I'm pretty stoked.

If this were to get polished, the next steps would be:

1. Improve speed (reevaluate approach of using setState)
2. Fix mixed-dimensions problem
3. Support highlighted lines
4. Add preview/save step separate from recording step
5. Add menu for gif options

The example below has been compressed. It was 11MB originally and then I went to ezgif.com and resized it so GH would lemme embed it.

[mfix22]

(Previous comment got deleted 😞)

@JessicaSachs this is amazing! 🎉 So cool that you got this working! I had never heard of gif.js before

If you would be up for it, I would absolutely love to help integrate this work into Carbon itself on my nights and weekends. Also happy to consult asynchronously if that works better 🙂I totally understand if you don't have the bandwidth — even if you pushed up a WIP PR rebased on master, that would be incredibly helpful.

Finally, FWIW, I would be more than happy to merge this with only a working record feature. No need for line-highlighting or menu options for an initial version, IMO.

I 🖤 the Carbon community!

[simpleneeraj]

Carbon.now.sh use dom-to-image library to generate images and svg from any div (dom) , unfortunately gif export is not possible with this library.
By @neerajcodes

[mfix22]

Carbon.now.sh use dom-to-image library to generate images and svg from any div (dom) , unfortunately gif export is not possible with this library.

This is true, however as @JessicaSachs demonstrated above, it is possible to combine this with a GIF library to create them. I haven't had time to implement this feature, though.

[JessicaSachs]

@mfix22 if I rebased, would you be able to take it over the line?

[mfix22]

@mfix22 if I rebased, would you be able to take it over the line?

@JessicaSachs unfortunately, I don't have much time for feature development at the moment 😞 If you rebased and pushed up a PR, that could be good so I can work on it steadily in the background, though.

[javydekoning]

This is an interesting approach: https://www.animate-code.com/