12 ms·

Keyframes: Delivering scalable, high-quality animations to mobile clients

393 points by theelfismike 10y ago

amsheehan 10y ago
I wonder what this means for animation studios, or edit houses. Obviously most dev shops don't have a need for full time animators, but just as obvious is that a lot of devs don't know animation fundamentals outside of how to implement an animation without jank.
- aikah 10y ago
  > I wonder what this means for animation studios, or edit houses. It means nothing > A library for converting Adobe AE shape based animations to a data format and play it back on Android and iOS devices. You still need to be able to produce the animation at first place.
omginternets 10y ago
I'm reminded of this: https://youtu.be/pAEAbqrE5Zw https://youtu.be/pAEAbqrE5Zw Does it represent a lot of work by skilled technicians? Undoubtedly. Is it interesting in it's own right? Frankly I think not. The surrounding question of the socialization of the internet is interesting, to be sure, but at the end of the day these are just animated emojis...
- jsprogrammer 10y ago
  It was interesting enough for FB to strip down and repackage https://github.com/bodymovin/bodymovin https://github.com/bodymovin/bodymovin
  - omginternets 10y ago
    Your example speaks to my point: there's nothing new, innovative, technically challenging (beyond the norm). I really don't see what there is to write home about. This article reads as a PR announcement (which is okay) disguised as a technical achievement (which it isn't). They're "just" animations.
    - city41 10y ago
      Maybe not the biggest breakthrough ever, but it does fill a gap. Animations like this on the web really weren't possible without either using Flash or SMIL. A completely JavaScript based solution is very welcome.
      - deleted 10y ago
        [deleted]
      - misio 10y ago
        I think the annoyance is the slightly smug tone of "Look what I invented. Vector animation and keyframes!" It's a cool implementation but it feels like they are claiming to have broken amazing new ground. To people that don't understand much of the background technology that's exactly how it reads.
- deleted 10y ago
  [deleted]
- tdb7893 10y ago
  It might not be novel but it looks to be useful and well supported, which is really what counts in JS libraries
- seanwilson 10y ago
  > Does it represent a lot of work by skilled technicians? Undoubtedly. Is it interesting in it's own right? Frankly I think not. You don't think having an easy way to create high quality animations for any purpose that work on multiple platforms is interesting...? You might not find the current application of it interesting but that's like saying React isn't interesting because someone used it to make another Flappy Bird game.
  - TheFarmingBunny 10y ago
    But react isn't interesting because they could have just modified custom elements via a polyfill and javascript extension. It would work mostly natively on newer browsers. Keyframes is just after effects animation in HTML5, a feature that could be implemented more natively using svg and a solution similar to this for older browsers. Facebook seems to want to dominate with single-use, clunky libaries.
    - seanwilson 10y ago
      > Keyframes is just after effects animation in HTML5, a feature that could be implemented more natively using svg and a solution similar to this for older browsers That's another approach which has it's own pros and cons. The approach from the article is obviously good if you have Affect Effects experts on hand. I'm not understanding why this isn't interesting to programmers who on a daily basis have to weigh up the pros and cons of different technology/library choices.
      - misio 10y ago
        >I'm not understanding why this isn't interesting to programmers who on a daily basis have to weigh up the pros and cons of different technology/library choices. Perhaps I'm showing my age, but this feels like this problem was solved a long time ago, forgotten or unused to a large extent and now re-invented. Flash was the clever web version back in the day but I can't see anything really new in this. I could absolutely be missing the point though. I never count that out.
- nkozyra 10y ago
  It's been a while since I've seen that episode, but ... wasn't that _the_ product in SV? This represents a small bit of UX that may be compelling enough to keep users engaged in new ways on their primary product (a relatively large social media site, ftr).
  - omginternets 10y ago
    Yes. It's an analogy. The purpose of an analog is not to be exactly identical, otherwise it would be called an equality.
    - nkozyra 10y ago
      I'm sorry, it doesn't seem remotely comparable. Huge, complicated products are often made of seemingly inconsequential pieces. That SV piece was about an entire product made of an inconsequential piece of tech.
- deleted 10y ago
  [deleted]
echelon 10y ago
This is really slick, and I'm going to investigate using it for the Donald Trump animation on jungle.horse. The license [1] doesn't look to be as encumbered as some of Facebook's other open source licenses, but does include a clause I found to be strange: > provided Your Software does not consist solely of the Software So if I'm reading this correctly, it means only Facebook can redistribute this software? Wat. [1] https://github.com/facebookincubator/Keyframes/blob/master/LICENSE.md https://github.com/facebookincubator/Keyframes/blob/master/L...
- etimberg 10y ago
  I wonder how that affects creating a fork of it. At what point does it become different enough that you can safely distribute it
  - crush_xc 10y ago
    that's true, it's a bit of a gray area.
  - peller 10y ago
    IANAL, but it reads to me like they don't think that point exists. "You can use it, but you can't publish a fork of it." Definitely not open source in my eyes.
  - detaro 10y ago
    Are you even allowed to redistribute a modified version at all? Modification is only allowed for "internal use".
- crush_xc 10y ago
  the way I read it is, I can't put a new name on it under my name and then redistribute it. But I can use it in a library or app and then open source and distribute that
- dublinben 10y ago
  That restriction makes this quite blatantly not open source or free software, under the accepted definitions. Why couldn't they just release this under the MIT license or something else like that?
deleted 10y ago
[deleted]
valine 10y ago
This is a powerful idea. I've looked for tools to do this exact thing. I'm the sole animator on a team of software developers and currently when I want to create an animation in an iOS app I usually start by mocking up the animation in a tool like after effects, and then recreate that animation using my graph editor as reference in core animation. Svg works well for storing shapes. Having a similar standard for storing animation curves is really powerful.
- hackcrafter 10y ago
  How do you directly render SVG in your mobile apps currently? Have you tried font-iconification services like http://fontastic.me/ http://fontastic.me/ ?
dharma1 10y ago
tl;dr - A plugin/library for exporting vector animations from After Effects and using them easily in iOS/Android apps. Previous options were exporting SVG animations, rendering to bitmap spritesheets or png sequences - or having to write a spec for the AE animation and recreate it in iOS/Android.
sschueller 10y ago
Why can't this just be MIT licensed?
wiradikusuma 10y ago
Correct me if I'm wrong. It sounds like Keyframes is like "Flash runtime", the differences are you author your animation in After Effects, and the output is JSON (instead of SWF).
- subb 10y ago
  Well, it's missing the interactivity part.
- Matthias247 10y ago
  Yes, that was also my first thought. Keyframes animations were pretty much one of the earliest features of Flash. Used those nearly 15 years ago. However Flash was/is not limited to that, since it's also a completely programmable. Since Adobe moved quite some effort away from Flash and towards HTML I'm pretty sure that they would now also support exporting keyframe animations from one of their standard tools into a native browser format.
  - dexwiz 10y ago
    Doesn't hurt to have competing standards. Also the major issue with Flash was the execution environment, not the file format. Running Flash inside the browser opened up all sorts of security holes. This just uses javascript to manipulate shadow DOM elements. Pretty standard practices in a modern JS framework.
  - neovive 10y ago
    It would be great to finally get back the true programmable animations that we had with Flash so many years ago. It took a while, but things to be coming full circle--for the better.
    - Matthias247 10y ago
      It's bascially the same as for UI components. Adobe had the great MXML based Flex framework back then. The web world only slowly catched up, and I think it took until the current gen of frameworks (angular2, etc.) to be at the same level. However the good thing (as you also pointed out) is that the new variants are based on standards.
omouse 10y ago
Why not APNG?
- jandrese 10y ago
  Size constraints and the need to be able to smoothly scale to a wide variety of screen sizes.
- seanwilson 10y ago
  APNG files are normally smaller than GIFs (about 30% smaller) but they're still going to be big for high quality animations. SVG/vector animations can be tiny in comparison.
- wyldfire 10y ago
  It's a raster format and they state pretty clearly why they don't want raster images.
kylehotchkiss 10y ago
Neat! Where's the react-native port? I know there's gotta be one since FB uses it in their apps ;)
- hackcrafter 10y ago
  Exactly! This should be wrappable by a React Native Component, it really is screaming for somebody to do that...
omegote 10y ago
Tell me again about how bad flash was for everything, please?
- johansch 10y ago
  The bad part of Flash was the Adobe binary which besides needing to use the messy plugin interface (separate process using an ancient interface, ugh) seemingly always contained tens/hundreds of unresolved security issues.
lozzle 10y ago
Hey, everyone! I'm one of the developers at Facebook who worked on this library since its conception! Really excited to be able to share this library today! I'll be checking up here periodically and can help answer any technical questions that you have!
- echelon 10y ago
  Why does the software license [1] include the following clause: > provided Your Software does not consist solely of the Software Why didn't you guys choose MIT or BSD? It feels like the custom Facebook license is close to the intent of these, but it has that mysterious gotcha. In any case, thanks for the software! It looks really slick, and I definitely have a use case for using it to replace the sprite sheet I used for Donald Trump on jungle.horse. [1] https://github.com/facebookincubator/Keyframes/blob/master/LICENSE.md https://github.com/facebookincubator/Keyframes/blob/master/L...
  - electic 10y ago
    You are misreading it. Software = Keyframes software. Your Software = Whatever you are releasing. So basically they are saying you can't redistribute just the Keyframes software library by itself. Which also means, if I understand this right, you can't fork it and modify it either. I agree however, not a good license.
    - echelon 10y ago
      I'm not misreading it. The license says we cannot fork the software. That's not open source.
      - CorpOverreach 10y ago
        Do you have access to the source? Yes? It's open source. Open Source need not be free as in beer, nor as in freedom.
        deleted 10y ago
yeldarb 10y ago
Is there a way to also use it on the web? Presumably FB is also using it in their desktop site.
nickmain 10y ago
Related - YouI.tv is a commercial product that exports animations and assets from AfterEffects in order to build whole apps: http://www.youi.tv/youi-engine/ http://www.youi.tv/youi-engine/
zigzigzag 10y ago
I was totally down with this - a tight, efficient vector graphics format with After Effects integration, super - up until the point they said these animations were JSON files. Huh? Didn't I just read a whole blog post saying that one of their requirements was fast loading from disk, small bandwidth usage, etc? And that's what justified creating an entirely new image format from scratch, not something the internet is really suffering a shortage of already? I know JSON is fashionable but that ending just seems kind of ridiculous. What's wrong with a binary format? Use Cap'n'Proto and mmap it! Saying numbers represented as text compresses well was the icing on the cake. No shit!
- lozzle 10y ago
  Hey, zigzigzag! The reason we went with JSON initially was for ease to work with, debug, and general ability to tweak and make the development process for this project much easier. That's definitely not to say there aren't some notable improvements we can make to this library!
- BinaryIdiot 10y ago
  While a binary format would be better over the wire, once it's put into memory the format really doesn't matter. In fact I would argue that the decision to use JSON versus XML versus a binary format is entirely immaterial as it'll get cached once and likely never downloaded again (essentially). At least as far as Facebook's usage is concerned (they load these 6 once and never again). Also I think you have to pick something human readable here. One of the great things about SVG is that it's in XML so you can read it, tweak it, etc. It's super handy when you want to make small changes that only affect the image. So I see using JSON as pretty handy. Don't forget there are many types of formats out there that have 2 types: a binary and human readable type. One used typically during debugging and one used for optimal over-the-wire transport. I don't see why this couldn't be possible at a later time. Edit: I don't understand the downvotes. Over-optimizing is a thing. For a one time download I don't see the handfuls of milliseconds you're saving mattering. In either case of receiving a binary or JSON you will store it in an optimal format on the device...
  - mahyarm 10y ago
debt 10y ago
is facebook okay? how many developer hours went into making their emojis animate properly? i don't want to say it's a waste of time/shareholder value but it might be. still interesting though. gonna check it out.
- bbcbasic 10y ago
  Facebook spending a developer year on it is like your average dev shop spending 5 minutes of your time on the daily stand-up.
mareck16 10y ago
I've made the exact same thing, basically. A tool to convert AE animations to iOS. Has some other features, but it's also AE -> JSON -> code: http://www.squall.no http://www.squall.no Cool to see what the folks at FB came up with!
- redindian75 10y ago
  very well polished... will check it out
mikebay 10y ago
Facebook, it's unbelievable how you keep pushing your custom licenses and then distribute it via open source channels. Should be removed from github! I hope people find alternatives with better license.
puppetmaster3 10y ago
Or, be a winner and use GSAP. Just saying.
pointernil 10y ago
Any "export-paths/pipelines" available to use the lib with After-Effects alternatives?

393 points by theelfismike 10y ago

I wonder what this means for animation studios, or edit houses. Obviously most dev shops don't have a need for full time animators, but just as obvious is that a lot of devs don't know animation fundamentals outside of how to implement an animation without jank.

aikah 10y ago
> I wonder what this means for animation studios, or edit houses. It means nothing > A library for converting Adobe AE shape based animations to a data format and play it back on Android and iOS devices. You still need to be able to produce the animation at first place.

omginternets 10y ago

I'm reminded of this: https://youtu.be/pAEAbqrE5Zw https://youtu.be/pAEAbqrE5Zw Does it represent a lot of work by skilled technicians? Undoubtedly. Is it interesting in it's own right? Frankly I think not. The surrounding question of the socialization of the internet is interesting, to be sure, but at the end of the day these are just animated emojis...

jsprogrammer 10y ago
It was interesting enough for FB to strip down and repackage https://github.com/bodymovin/bodymovin https://github.com/bodymovin/bodymovin
- omginternets 10y ago
  Your example speaks to my point: there's nothing new, innovative, technically challenging (beyond the norm). I really don't see what there is to write home about. This article reads as a PR announcement (which is okay) disguised as a technical achievement (which it isn't). They're "just" animations.
  - city41 10y ago
    Maybe not the biggest breakthrough ever, but it does fill a gap. Animations like this on the web really weren't possible without either using Flash or SMIL. A completely JavaScript based solution is very welcome.
    - deleted 10y ago
      [deleted]
    - misio 10y ago
      I think the annoyance is the slightly smug tone of "Look what I invented. Vector animation and keyframes!" It's a cool implementation but it feels like they are claiming to have broken amazing new ground. To people that don't understand much of the background technology that's exactly how it reads.
deleted 10y ago
[deleted]
tdb7893 10y ago
It might not be novel but it looks to be useful and well supported, which is really what counts in JS libraries
seanwilson 10y ago
> Does it represent a lot of work by skilled technicians? Undoubtedly. Is it interesting in it's own right? Frankly I think not. You don't think having an easy way to create high quality animations for any purpose that work on multiple platforms is interesting...? You might not find the current application of it interesting but that's like saying React isn't interesting because someone used it to make another Flappy Bird game.
- TheFarmingBunny 10y ago
  But react isn't interesting because they could have just modified custom elements via a polyfill and javascript extension. It would work mostly natively on newer browsers. Keyframes is just after effects animation in HTML5, a feature that could be implemented more natively using svg and a solution similar to this for older browsers. Facebook seems to want to dominate with single-use, clunky libaries.
  - seanwilson 10y ago
    > Keyframes is just after effects animation in HTML5, a feature that could be implemented more natively using svg and a solution similar to this for older browsers That's another approach which has it's own pros and cons. The approach from the article is obviously good if you have Affect Effects experts on hand. I'm not understanding why this isn't interesting to programmers who on a daily basis have to weigh up the pros and cons of different technology/library choices.
    - misio 10y ago
      >I'm not understanding why this isn't interesting to programmers who on a daily basis have to weigh up the pros and cons of different technology/library choices. Perhaps I'm showing my age, but this feels like this problem was solved a long time ago, forgotten or unused to a large extent and now re-invented. Flash was the clever web version back in the day but I can't see anything really new in this. I could absolutely be missing the point though. I never count that out.
nkozyra 10y ago
It's been a while since I've seen that episode, but ... wasn't that _the_ product in SV? This represents a small bit of UX that may be compelling enough to keep users engaged in new ways on their primary product (a relatively large social media site, ftr).
- omginternets 10y ago
  Yes. It's an analogy. The purpose of an analog is not to be exactly identical, otherwise it would be called an equality.
  - nkozyra 10y ago
    I'm sorry, it doesn't seem remotely comparable. Huge, complicated products are often made of seemingly inconsequential pieces. That SV piece was about an entire product made of an inconsequential piece of tech.
deleted 10y ago
[deleted]

echelon 10y ago

This is really slick, and I'm going to investigate using it for the Donald Trump animation on jungle.horse. The license [1] doesn't look to be as encumbered as some of Facebook's other open source licenses, but does include a clause I found to be strange: > provided Your Software does not consist solely of the Software So if I'm reading this correctly, it means only Facebook can redistribute this software? Wat. [1] https://github.com/facebookincubator/Keyframes/blob/master/LICENSE.md https://github.com/facebookincubator/Keyframes/blob/master/L...

etimberg 10y ago
I wonder how that affects creating a fork of it. At what point does it become different enough that you can safely distribute it
- crush_xc 10y ago
  that's true, it's a bit of a gray area.
- peller 10y ago
  IANAL, but it reads to me like they don't think that point exists. "You can use it, but you can't publish a fork of it." Definitely not open source in my eyes.
- detaro 10y ago
  Are you even allowed to redistribute a modified version at all? Modification is only allowed for "internal use".
crush_xc 10y ago
the way I read it is, I can't put a new name on it under my name and then redistribute it. But I can use it in a library or app and then open source and distribute that
dublinben 10y ago
That restriction makes this quite blatantly not open source or free software, under the accepted definitions. Why couldn't they just release this under the MIT license or something else like that?

deleted 10y ago

[deleted]

valine 10y ago

This is a powerful idea. I've looked for tools to do this exact thing. I'm the sole animator on a team of software developers and currently when I want to create an animation in an iOS app I usually start by mocking up the animation in a tool like after effects, and then recreate that animation using my graph editor as reference in core animation. Svg works well for storing shapes. Having a similar standard for storing animation curves is really powerful.

hackcrafter 10y ago
How do you directly render SVG in your mobile apps currently? Have you tried font-iconification services like http://fontastic.me/ http://fontastic.me/ ?

dharma1 10y ago

tl;dr - A plugin/library for exporting vector animations from After Effects and using them easily in iOS/Android apps. Previous options were exporting SVG animations, rendering to bitmap spritesheets or png sequences - or having to write a spec for the AE animation and recreate it in iOS/Android.

sschueller 10y ago

Why can't this just be MIT licensed?

wiradikusuma 10y ago

Correct me if I'm wrong. It sounds like Keyframes is like "Flash runtime", the differences are you author your animation in After Effects, and the output is JSON (instead of SWF).

subb 10y ago
Well, it's missing the interactivity part.
Matthias247 10y ago
Yes, that was also my first thought. Keyframes animations were pretty much one of the earliest features of Flash. Used those nearly 15 years ago. However Flash was/is not limited to that, since it's also a completely programmable. Since Adobe moved quite some effort away from Flash and towards HTML I'm pretty sure that they would now also support exporting keyframe animations from one of their standard tools into a native browser format.
- dexwiz 10y ago
  Doesn't hurt to have competing standards. Also the major issue with Flash was the execution environment, not the file format. Running Flash inside the browser opened up all sorts of security holes. This just uses javascript to manipulate shadow DOM elements. Pretty standard practices in a modern JS framework.
- neovive 10y ago
  It would be great to finally get back the true programmable animations that we had with Flash so many years ago. It took a while, but things to be coming full circle--for the better.
  - Matthias247 10y ago
    It's bascially the same as for UI components. Adobe had the great MXML based Flex framework back then. The web world only slowly catched up, and I think it took until the current gen of frameworks (angular2, etc.) to be at the same level. However the good thing (as you also pointed out) is that the new variants are based on standards.

omouse 10y ago

Why not APNG?

jandrese 10y ago
Size constraints and the need to be able to smoothly scale to a wide variety of screen sizes.
seanwilson 10y ago
APNG files are normally smaller than GIFs (about 30% smaller) but they're still going to be big for high quality animations. SVG/vector animations can be tiny in comparison.
wyldfire 10y ago
It's a raster format and they state pretty clearly why they don't want raster images.

kylehotchkiss 10y ago

Neat! Where's the react-native port? I know there's gotta be one since FB uses it in their apps ;)

hackcrafter 10y ago
Exactly! This should be wrappable by a React Native Component, it really is screaming for somebody to do that...

omegote 10y ago

Tell me again about how bad flash was for everything, please?

johansch 10y ago
The bad part of Flash was the Adobe binary which besides needing to use the messy plugin interface (separate process using an ancient interface, ugh) seemingly always contained tens/hundreds of unresolved security issues.

lozzle 10y ago

Hey, everyone! I'm one of the developers at Facebook who worked on this library since its conception! Really excited to be able to share this library today! I'll be checking up here periodically and can help answer any technical questions that you have!

echelon 10y ago
Why does the software license [1] include the following clause: > provided Your Software does not consist solely of the Software Why didn't you guys choose MIT or BSD? It feels like the custom Facebook license is close to the intent of these, but it has that mysterious gotcha. In any case, thanks for the software! It looks really slick, and I definitely have a use case for using it to replace the sprite sheet I used for Donald Trump on jungle.horse. [1] https://github.com/facebookincubator/Keyframes/blob/master/LICENSE.md https://github.com/facebookincubator/Keyframes/blob/master/L...
- electic 10y ago
  You are misreading it. Software = Keyframes software. Your Software = Whatever you are releasing. So basically they are saying you can't redistribute just the Keyframes software library by itself. Which also means, if I understand this right, you can't fork it and modify it either. I agree however, not a good license.
  - echelon 10y ago
    I'm not misreading it. The license says we cannot fork the software. That's not open source.
    - CorpOverreach 10y ago
      Do you have access to the source? Yes? It's open source. Open Source need not be free as in beer, nor as in freedom.
      - deleted 10y ago

yeldarb 10y ago

Is there a way to also use it on the web? Presumably FB is also using it in their desktop site.

nickmain 10y ago

Related - YouI.tv is a commercial product that exports animations and assets from AfterEffects in order to build whole apps: http://www.youi.tv/youi-engine/ http://www.youi.tv/youi-engine/

zigzigzag 10y ago

I was totally down with this - a tight, efficient vector graphics format with After Effects integration, super - up until the point they said these animations were JSON files. Huh? Didn't I just read a whole blog post saying that one of their requirements was fast loading from disk, small bandwidth usage, etc? And that's what justified creating an entirely new image format from scratch, not something the internet is really suffering a shortage of already? I know JSON is fashionable but that ending just seems kind of ridiculous. What's wrong with a binary format? Use Cap'n'Proto and mmap it! Saying numbers represented as text compresses well was the icing on the cake. No shit!

lozzle 10y ago
Hey, zigzigzag! The reason we went with JSON initially was for ease to work with, debug, and general ability to tweak and make the development process for this project much easier. That's definitely not to say there aren't some notable improvements we can make to this library!
BinaryIdiot 10y ago
While a binary format would be better over the wire, once it's put into memory the format really doesn't matter. In fact I would argue that the decision to use JSON versus XML versus a binary format is entirely immaterial as it'll get cached once and likely never downloaded again (essentially). At least as far as Facebook's usage is concerned (they load these 6 once and never again). Also I think you have to pick something human readable here. One of the great things about SVG is that it's in XML so you can read it, tweak it, etc. It's super handy when you want to make small changes that only affect the image. So I see using JSON as pretty handy. Don't forget there are many types of formats out there that have 2 types: a binary and human readable type. One used typically during debugging and one used for optimal over-the-wire transport. I don't see why this couldn't be possible at a later time. Edit: I don't understand the downvotes. Over-optimizing is a thing. For a one time download I don't see the handfuls of milliseconds you're saving mattering. In either case of receiving a binary or JSON you will store it in an optimal format on the device...
- mahyarm 10y ago

debt 10y ago

is facebook okay? how many developer hours went into making their emojis animate properly? i don't want to say it's a waste of time/shareholder value but it might be. still interesting though. gonna check it out.

bbcbasic 10y ago
Facebook spending a developer year on it is like your average dev shop spending 5 minutes of your time on the daily stand-up.

mareck16 10y ago

I've made the exact same thing, basically. A tool to convert AE animations to iOS. Has some other features, but it's also AE -> JSON -> code: http://www.squall.no http://www.squall.no Cool to see what the folks at FB came up with!

redindian75 10y ago
very well polished... will check it out

mikebay 10y ago

Facebook, it's unbelievable how you keep pushing your custom licenses and then distribute it via open source channels. Should be removed from github! I hope people find alternatives with better license.

puppetmaster3 10y ago

Or, be a winner and use GSAP. Just saying.

pointernil 10y ago

Any "export-paths/pipelines" available to use the lib with After-Effects alternatives?