drag n drop animated gif maker #53

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

Comments

Projects
None yet
@paulirish
Member

paulirish commented Feb 16, 2012

i'll sponsor domain and hosting!

@vladikoff

This comment has been minimized.

Show comment
Hide comment
@vladikoff

vladikoff Feb 16, 2012

Does it have to be client-side?

Does it have to be client-side?

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

Yeah it totally has to be clientside. Why not!

Member

paulirish commented Feb 16, 2012

Yeah it totally has to be clientside. Why not!

@jzazove

This comment has been minimized.

Show comment
Hide comment
@jzazove

jzazove Feb 16, 2012

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

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

This comment has been minimized.

Show comment
Hide comment
@graiz

graiz 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?

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

This comment has been minimized.

Show comment
Hide comment
@dewski

dewski Feb 16, 2012

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

dewski commented Feb 16, 2012

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member
@andres314

This comment has been minimized.

Show comment
Hide comment
@andres314

andres314 Feb 16, 2012

it sounds challenging. I would love to participate!

it sounds challenging. I would love to participate!

@wilson1315

This comment has been minimized.

Show comment
Hide comment
@wilson1315

wilson1315 Feb 16, 2012

Interesting! I am in!

Interesting! I am in!

@aaronsnoswell

This comment has been minimized.

Show comment
Hide comment
@aaronsnoswell

aaronsnoswell Feb 16, 2012

Cool :)

Cool :)

@paulirish

This comment has been minimized.

Show comment
Hide comment
@uxder

This comment has been minimized.

Show comment
Hide comment
@uxder

uxder Feb 16, 2012

Would love to help if I can :)

uxder commented Feb 16, 2012

Would love to help if I can :)

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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
Member

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

This comment has been minimized.

Show comment
Hide comment
@mohsen1

mohsen1 Feb 16, 2012

A timeline is a good idea

mohsen1 commented Feb 16, 2012

A timeline is a good idea

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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

Member

paulirish commented Feb 16, 2012

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

@darcyclarke

This comment has been minimized.

Show comment
Hide comment
@darcyclarke

darcyclarke Feb 16, 2012

Member

UI I'll jam on tonight

Member

darcyclarke commented Feb 16, 2012

UI I'll jam on tonight

@frickenate

This comment has been minimized.

Show comment
Hide comment
@frickenate

frickenate 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. :)

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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. :)

Member

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@theamoeba

theamoeba Feb 16, 2012

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

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

@mohsen1

This comment has been minimized.

Show comment
Hide comment
@mohsen1

mohsen1 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.

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

This comment has been minimized.

Show comment
Hide comment
@frickenate

frickenate 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.

@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

This comment has been minimized.

Show comment
Hide comment
@darcyclarke

darcyclarke Feb 16, 2012

Member

@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

Member

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

This comment has been minimized.

Show comment
Hide comment
@frickenate

frickenate 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/

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

This comment has been minimized.

Show comment
Hide comment
@jacobSingh

jacobSingh Feb 16, 2012

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

Cool idea

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

Cool idea

@grayghostvisuals

This comment has been minimized.

Show comment
Hide comment
@grayghostvisuals

grayghostvisuals Feb 16, 2012

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

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

@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

Member

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

This comment has been minimized.

Show comment
Hide comment
@carsonmcdonald

carsonmcdonald Feb 16, 2012

Member

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

https://github.com/carsonmcdonald/mothereffinganimatedgif

Member

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

This comment has been minimized.

Show comment
Hide comment
@grayghostvisuals

grayghostvisuals 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

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

This comment has been minimized.

Show comment
Hide comment
@darcyclarke

darcyclarke Feb 16, 2012

Member

@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.)

Member

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

Okay so we have three competing PRs! :D
https://github.com/h5bp/mothereffinganimatedgif/pulls

I'm going through now to see which is best to use as a foundation.

Member

paulirish commented Feb 16, 2012

Okay so we have three competing PRs! :D
https://github.com/h5bp/mothereffinganimatedgif/pulls

I'm going through now to see which is best to use as a foundation.

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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!

Member

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

This comment has been minimized.

Show comment
Hide comment
@darcyclarke

darcyclarke Feb 16, 2012

Member

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

Member

darcyclarke commented Feb 16, 2012

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

@carsonmcdonald

This comment has been minimized.

Show comment
Hide comment
@carsonmcdonald

carsonmcdonald Feb 16, 2012

Member

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

Member

carsonmcdonald commented Feb 16, 2012

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@darcyclarke

darcyclarke Feb 16, 2012

Member

UI! As usual.

Member

darcyclarke commented Feb 16, 2012

UI! As usual.

@dewski

This comment has been minimized.

Show comment
Hide comment
@dewski

dewski Feb 16, 2012

I'll work on the hover effect on dragover.

dewski commented Feb 16, 2012

I'll work on the hover effect on dragover.

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@karlpcrowley

karlpcrowley Feb 16, 2012

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

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

@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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@carsonmcdonald

carsonmcdonald Feb 16, 2012

Member

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?

Member

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@dewski

dewski 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.

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

This comment has been minimized.

Show comment
Hide comment
@darcyclarke

darcyclarke Feb 16, 2012

Member

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?

Member

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?

@karlpcrowley

This comment has been minimized.

Show comment
Hide comment
@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

@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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@bgrins

bgrins Feb 16, 2012

Member

@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)..

Member

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@ryanseddon

ryanseddon 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.

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

@bgrins

This comment has been minimized.

Show comment
Hide comment
@bgrins

bgrins Feb 16, 2012

Member

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

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 16, 2012

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 17, 2012

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@mohsen1

mohsen1 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.

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 17, 2012

Member

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.

Member

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

This comment has been minimized.

Show comment
Hide comment
@mohsen1

mohsen1 Feb 17, 2012

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

mohsen1 commented Feb 17, 2012

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

@paulirish

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Feb 17, 2012

Member

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

Member

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

This comment has been minimized.

Show comment
Hide comment
@paulirish

paulirish Dec 11, 2012

Member

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

someone wants to buy it!

Member

paulirish commented Dec 11, 2012

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

someone wants to buy it!

@remy

This comment has been minimized.

Show comment
Hide comment
@remy

remy Jul 11, 2013

Busted in chrome atm :(

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

remy commented Jul 11, 2013

Busted in chrome atm :(

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

@grayghostvisuals

This comment has been minimized.

Show comment
Hide comment
@grayghostvisuals

grayghostvisuals Jul 11, 2013

Busted in chrome atm :(

@remy You should put this in the issue tracker

Busted in chrome atm :(

@remy You should put this in the issue tracker

@remy

This comment has been minimized.

Show comment
Hide comment
@remy

remy Jul 11, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment