drag n drop animated gif maker

[paulirish]

• Imagine the drag 'n drop UI of www.dropmocks.com (drag files on from your desktop..)
• along with the GIF power of https://github.com/antimatter15/jsgif
• and you could drag on a bunch of jpgs, choose the speed, and get your GIF.

i'll sponsor domain and hosting!

[vladikoff]

Does it have to be client-side?

[paulirish]

Yeah it totally has to be clientside. Why not!

[jzazove]

seems like if Gifpal added drag 'n drop, you'd have what you're looking for. ref: http://www.gifpal.com/

[graiz]

Can't believe we haven't created a better animation file since CompuServe 1989.
Paul, I like the idea but there's a bigger issue that needs solving. Can I lazyweb a better W3C?

[dewski]

I'd be down to help out, sounds like a fun project.

[paulirish]

folks created APNG, which hypothetically is cooler. It's got support in Firefox and Opera. other browsers are like WHO cares, anim gifs do the job. ANYWAY this is not a debate on standards :)

I JUST WANT SOME ANIM GIFS MADE EZ thank you very much.

[paulirish]

I made a repo: https://github.com/h5bp/mothereffinganimatedgif

[andres314]

it sounds challenging. I would love to participate!

[wilson1315]

Interesting! I am in!

[aaronsnoswell]

Cool :)

[paulirish]

WIP from @vladikoff here http://text-align.com/gifster/a/Demos/jpg.html

[uxder]

Would love to help if I can :)

[paulirish]

darcy got some structure for the repo going: https://github.com/h5bp/mothereffinganimatedgif

what we need:

1. dropmocks style drag n drop FileReader reading action
   • darcy just started that here http://jsfiddle.net/darcyclarke/YWF3u/1/
2. UI for selecting framerate and everything else the UI should do
   • takers? css and design skills wanted
3. anim gif plumbing
   • mostly done by vlad http://text-align.com/gifster/a/Demos/jpg.html needs integration

[mohsen1]

A timeline is a good idea

[paulirish]

Like a drag n drop timeline to rearrange the order? I agree! Anyone want to start on that?

[darcyclarke]

UI I'll jam on tonight

[frickenate]

Hrm, I'm between jobs right now and this looks like a fun thing to attack. I'm going to give it a try on my own as I'm curious to see if I can do this. PS: bonus points to make the tool work very intuitively à la Mario demo from Bret Victor. http://vimeo.com/36579366 :)

Edit: Ok, so there is too much involved for a single person to take a quick shot at. There is a lot to consider. For example, gifpal is great for effects, drawing, etc (it's flash, easier to add the fancy extras that we were likely won't have). However, as a negative for gifpal: you must create a landscape gif at 320x240... what about support for portrait or smaller/larger sizes? Also, gifpal - and it seems the GIFEncoder.js Paul pointed to - only supports a single shared frame delay across the entire gif. But gif format allows for a different frame delay per frame, which allows for cooler effects. Many possible options to consider!

2nd edit: never mind about GIFEncoder.js. Read the comment for setDelay(), it can be changed between adding frames! I would say changeable frame delay in UI would be amazing. :)

[paulirish]

http://mothereffinganimatedgif.com/ is live, updating every 10min based on whatever's in the repo.

Everyone feel free to fork the repo and hack, though at this point you might hit some merge conflicts. :)

[paulirish]

Darcy is taking a break for tonight, if anyone want to wire up the jsfiddle DND/Filereader logic to the existing UI in the repo, go at it.

[theamoeba]

Lol, awesome :). There is a spelling mistake in the title of http://mothereffinganimatedgif.com/. It has a stray "e".

[mohsen1]

I'll work on it from tomorrow morning
I wish I could be a project member instead of asking pull requests every time.

[frickenate]

@paulirish @darcyclarke I've got it, just happened to be working on that part locally. I have it loading the uploads into image tags, and appending them to the filmstrip. Even have some landscape/portrait detection to allow mixing of the formats.

[darcyclarke]

@frickenate nice man. I had the D+D working that that JSFiddle @paulirish linked to earlier and if you're able to mash that with @vladikoffs working example of the GIF library you should be able to get it all together relatively easily.

Also, you may want to check out Downloadify by @dcneiner. Doug's library lets you generate downloadable files on the fly. More info here: https://github.com/dcneiner/Downloadify

[frickenate]

I apologize ahead of time for my formatting being different than the others. Feel free to clean it up to suit the rest, my brain can't handle it at 4am! This might be all I'll be contributing, not used to having to co-edit files.

Here is the progress I made on drag-dropped files being loaded into image tags and an ugly add to the files filmstrip. Note: due to the way the "Drag and drop files here" area was done in UI, you need to drop the files directly on those words, not anywhere at the bottom of the screen. No conversion being done into a specific file format yet - accepts jpeg, gif and png, and simply creates image tags in whatever format was uploaded.

It would be really cool to be able to generate either landscape or portrait gifs, at whatever download/export size you want. I made the filmstrip handle loading a mix of portrait/landscape by squaring the boxes, leaving black background color bars where necessary. Probably a more visually appealing way to handle this (especially if all images uploaded are either portrait or landscape).

Obviously the files filmstrip will need a lot of work by someone who can css much faster than I. Needs those placeholders to show until you upload something, at which point they get filled. Scrolling to handle lots of files, etc.

https://github.com/frickenate/mothereffinganimatedgif/

[jacobSingh]

Hmm... I tested it, drag and drop not working in Chrome / OSX at the moment.

Cool idea

[grayghostvisuals]

How about a Cache Manifest? Similar to what Sprite Cow is doing.

[paulirish]

@grayghostvisuals +1 that.
for now we'll keep it off because it makes development a pain in the ass but if you want to put things in place, that'd rock

[carsonmcdonald]

An inch forward. This should make d&d work. Also hitting the play button composes an animated gif.

https://github.com/carsonmcdonald/mothereffinganimatedgif

[grayghostvisuals]

What about typography? I'll sponsor the first year of a Typekit account if interested. I'd also understand if using the Google font network is a better way to go.

I'll start that manifest file :)p

[darcyclarke]

@grayghostvisuals google fonts all the way... I'll get funky with them tonight along with some updates to the UI which should add nice details (icons etc.)

[paulirish]

So turns out @bgrins already wrote a FileReader library which helps with the heavy lifting and provides a nice API
h5bp/mothereffinganimatedgif#5

I'm going to merge in that and then pull in Carson's hookup to the GIFEncoder:
https://github.com/h5bp/mothereffinganimatedgif/pull/4/files#L2R35

Boom!

[darcyclarke]

That's what I call an executive decision. Slam!

[carsonmcdonald]

Where should the resulting animated image end up? Modal popup or something like that?

[paulirish]

Wow that was easy: http://mothereffinganimatedgif.com/ (drag pics in. hit play)

(and big thanks to @mohsen1 for the critical App.timeline[] PR that glued things together)

Things left:

• choosing a size of the target anim gif [Paul]
• UI to set framerate
• hover effect on droppable area on dragover for affordance [bgrins]
• save functionality [carson]
  • let's skip the flash downloadify script: BlobBuilder ftw. Modernizr download page has reference implementation: here and here cc @ryanseddon
• feature tests for browser support. Mostly done by [bgrins]
  • If unsupported browser arrives, use brand new caniuse api to holler
• portrait landscape changes required? cc @frickenate

---

Anything else? All contributions welcome!

Anyone wanna call dibs on something from above?

I'm somewhat excited about launching this project 24 hours after it started, so 8pm PST would be an awesome target to hit if we can.

[darcyclarke]

UI! As usual.

[dewski]

I'll work on the hover effect on dragover.

[paulirish]

Also after 1 accepted PR i'll add you to the project so subsequent contributions can go right in.

[karlpcrowley]

maybe an additional file-browser for when drag and drop doesn't work? or even a URL input?

[paulirish]

@karlpcrowley hmm.. I think we're gonna have to require both FileReader and dnd support for this app. Opera <12 is only browser lacking DND but with FileReader. 12 supports both and will be good here.

[carsonmcdonald]

I'll look at save functionality.

Is anyone against making the timeline the drop target and making the content area the controls area and resulting image?

[paulirish]

Carson, I like a biggggasss drop target, but if the timeline is empty then no need to display it IMO. Also my usecase for this app is a 24 frame anim gif which requires some overflow:scroll in the timeline that we're lacking right now.

Also @grayghostvisuals just added a very nicely done cache manifest that we'll wire up later on. h5bp/mothereffinganimatedgif#6

[dewski]

I also like the huge drop target, I can include that in my pull request to hide the timeline until there are items.

[darcyclarke]

I'm going to hide the timeline area until the initial drop is placed and then animate it down with the populated images. You'll also be able to drag to organize images, utilizing jQuery draggable, and also use jQuery UI slider to navigate images beyond the width of the screen. "Play" button will be used to run animation within the drop area somewhere and then add options for global duration between frames and size. "Clear" button will wipe the timeline but prompt before doing so. Sound good?

[karlpcrowley]

Optional compression? -> http://www.clientcide.com/best-practices/optimization/clientside-image-compression/

[paulirish]

@karlpcrowley that was an april fools joke. but also, no i don think we need any compression. fast and loose!

@darcyclarke html5 drag n drop! <input type=range> for framerate setting. overflow:auto to navigate images beyond the screen.

[bgrins]

@karlpcrowley I can easily add in a file input as just another call to FileReader - I did this for http://instantsprite.com/ since not every browser supports drag-in (as far as I remember)..

[paulirish]

It's mostly good to coordinate here in the public but I'm also in #animatedgif on freenode IRC if you want to hop in there: http://webchat.freenode.net/?channels=animatedgif

[ryanseddon]

I could modify saveasbro.com to handle requests from this site so we don't need no stinking flash for saveas dialog triggering.

[bgrins]

@paulirish

• hover effect on droppable area on dragover for affordance - done
• feature tests for browser support - done for file reader. Not using caniuse api as of yet

[paulirish]

Awesome. Will update above comment.

As of now we have superhot blobbuilder a[download] functionality in place, thanks to carson.

I'm starting now on setting image sizes and maintaining aspect ratio.

[paulirish]

Okay! We now have...

• a UI for setting "delay" (inversed framerate)
• a UI for scaling the target image size (aspect ratio is whatever the first image in the set is)
• download functionality

styling/cleanup is ongoing and still needed.

I'm going to hook up to the caniuse api now

[mohsen1]

I'm going to add a handle to each image in timeline to let user extend or shorten duration of playing the image.

[paulirish]

Mohsen, can i ask you to handle that in your fork? We are locking down
features now and hoping to ship a 1.0 very very soon now.

[mohsen1]

Sure, then I will go to see how can I fix bugs/clean code.

[paulirish]

we launched!!

http://mothereffinganimatedgif.com/


we can close this thread as a successful endeavor. subsequent action will happen over in the repo's issue tracker:

https://github.com/h5bp/mothereffinganimatedgif

WOOO!!!!! Thanks everyone

[paulirish]

whoa. just realized this is #4 on google for animated gif!

someone wants to buy it!

[remy]

Busted in chrome atm :(

Uncaught TypeError: Cannot read property 'contentWindow' of null ui.js:91

[grayghostvisuals]

Busted in chrome atm :(

@remy You should put this in the issue tracker

[remy]

@grayghostvisuals aha!