Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

drag n drop animated gif maker #53

Closed
paulirish opened this issue Feb 16, 2012 · 60 comments
Closed

drag n drop animated gif maker #53

paulirish opened this issue Feb 16, 2012 · 60 comments
Labels

Comments

@paulirish
Copy link
Member

@paulirish paulirish commented Feb 16, 2012

i'll sponsor domain and hosting!

@vladikoff
Copy link

@vladikoff vladikoff commented Feb 16, 2012

Does it have to be client-side?

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

Yeah it totally has to be clientside. Why not!

@jzazove
Copy link

@jzazove jzazove commented Feb 16, 2012

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

@graiz
Copy link

@graiz graiz commented Feb 16, 2012

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
Copy link

@dewski dewski commented Feb 16, 2012

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

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

@andres314
Copy link

@andres314 andres314 commented Feb 16, 2012

it sounds challenging. I would love to participate!

@wilson1315
Copy link

@wilson1315 wilson1315 commented Feb 16, 2012

Interesting! I am in!

@aaronsnoswell
Copy link

@aaronsnoswell aaronsnoswell commented Feb 16, 2012

Cool :)

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

@uxder
Copy link

@uxder uxder commented Feb 16, 2012

Would love to help if I can :)

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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
  2. UI for selecting framerate and everything else the UI should do
    • takers? css and design skills wanted
  3. anim gif plumbing
@mohsen1
Copy link

@mohsen1 mohsen1 commented Feb 16, 2012

A timeline is a good idea

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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

@darcyclarke
Copy link
Member

@darcyclarke darcyclarke commented Feb 16, 2012

UI I'll jam on tonight

@frickenate
Copy link

@frickenate frickenate commented Feb 16, 2012

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
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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
Copy link

@theamoeba theamoeba commented Feb 16, 2012

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

@mohsen1
Copy link

@mohsen1 mohsen1 commented Feb 16, 2012

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

@frickenate
Copy link

@frickenate frickenate commented Feb 16, 2012

@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
Copy link
Member

@darcyclarke darcyclarke commented Feb 16, 2012

@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
Copy link

@frickenate frickenate commented Feb 16, 2012

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
Copy link

@jacobSingh jacobSingh commented Feb 16, 2012

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

Cool idea

@grayghostvisuals
Copy link

@grayghostvisuals grayghostvisuals commented Feb 16, 2012

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

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

@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
Copy link
Member

@carsonmcdonald carsonmcdonald commented Feb 16, 2012

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

https://github.com/carsonmcdonald/mothereffinganimatedgif

@grayghostvisuals
Copy link

@grayghostvisuals grayghostvisuals commented Feb 16, 2012

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
Copy link
Member

@darcyclarke darcyclarke commented Feb 16, 2012

@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
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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
Copy link
Member

@darcyclarke darcyclarke commented Feb 16, 2012

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

@carsonmcdonald
Copy link
Member

@carsonmcdonald carsonmcdonald commented Feb 16, 2012

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

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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
Copy link
Member

@darcyclarke darcyclarke commented Feb 16, 2012

UI! As usual.

@dewski
Copy link

@dewski dewski commented Feb 16, 2012

I'll work on the hover effect on dragover.

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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

@karlpcrowley
Copy link

@karlpcrowley karlpcrowley commented Feb 16, 2012

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

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

@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
Copy link
Member

@carsonmcdonald carsonmcdonald commented Feb 16, 2012

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
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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
Copy link

@dewski dewski commented Feb 16, 2012

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

@darcyclarke
Copy link
Member

@darcyclarke darcyclarke commented Feb 16, 2012

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?

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

@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
Copy link
Member

@bgrins bgrins commented Feb 16, 2012

@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
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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
Copy link

@ryanseddon ryanseddon commented Feb 16, 2012

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

@bgrins
Copy link
Member

@bgrins bgrins commented Feb 16, 2012

@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
Copy link
Member Author

@paulirish paulirish commented Feb 16, 2012

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
Copy link
Member Author

@paulirish paulirish commented Feb 17, 2012

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
Copy link

@mohsen1 mohsen1 commented Feb 17, 2012

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

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 17, 2012

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
Copy link

@mohsen1 mohsen1 commented Feb 17, 2012

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

@paulirish
Copy link
Member Author

@paulirish paulirish commented Feb 17, 2012

we launched!!

http://mothereffinganimatedgif.com/

![](http://paulirish.com/i/meag.jpg)

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 paulirish closed this Feb 17, 2012
@paulirish
Copy link
Member Author

@paulirish paulirish commented Dec 11, 2012

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

someone wants to buy it!

@remy
Copy link

@remy remy commented Jul 11, 2013

Busted in chrome atm :(

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

@grayghostvisuals
Copy link

@grayghostvisuals grayghostvisuals commented Jul 11, 2013

Busted in chrome atm :(

@remy You should put this in the issue tracker

@remy
Copy link

@remy remy commented Jul 11, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.