
Keyframes: Delivering scalable, high-quality animations to mobile clients - theelfismike
https://code.facebook.com/posts/354469174916519/
======
lozzle
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
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/L...](https://github.com/facebookincubator/Keyframes/blob/master/LICENSE.md)

~~~
zwegner
Note that, by publishing this repo publicly on GitHub, there is a right to
fork granted by GitHub's ToS[0], which this license seems to conflict with
(though IANAL of course...). Not sure what "fork" means in this context,
whether it's just duplicating a repository or also modifying it.

[0] [https://help.github.com/articles/github-terms-of-
service/#f-...](https://help.github.com/articles/github-terms-of-
service/#f-copyright-and-content-ownership) Section F.1: "By setting your
repositories to be viewed publicly, you agree to allow others to view and fork
your repositories."

~~~
idbehold
Agreed. I've already contacted GitHub to report abuse.

This license seems to directly contradict GitHub's Terms of Service. It says:

> [...] you are hereby granted a non-exclusive, worldwide, royalty-free
> copyright license to (1) use and copy the Software; and (2) reproduce and
> distribute the Software as part of your own software ("Your Software"),
> provided Your Software does not consist solely of the Software; and (3)
> modify the Software for your own internal use. Facebook reserves all rights
> not expressly granted to you in this license agreement.

Where as GitHub's Terms of Service state:

> By setting your repositories to be viewed publicly, you agree to allow
> others to view and fork your repositories.

It seems impossible for me to fork this software without violating Facebook's
license. To fork it on GitHub would require that I make the repo public
(meaning I would be distributing the Software as "My Software" even though it
consists solely of the Software). And any commits I made to the forked repo
would violate their license because I am only licensed to modify the Software
for my own "internal use".

~~~
gridspy
(2) only seems to apply if you publish the fork yourself - "reproduce and
distribute"

"reproduce and distribute the Software as part of your own software ("Your
Software"), provided Your Software does not consist solely of the Software;"

~~~
idbehold
If you click on the "Fork" button from GitHub's website then that is exactly
what you'd be doing.

------
echelon
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/L...](https://github.com/facebookincubator/Keyframes/blob/master/LICENSE.md)

~~~
etimberg
I wonder how that affects creating a fork of it. At what point does it become
different enough that you can safely distribute it

~~~
peller
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.

------
zigzigzag
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!

~~~
BinaryIdiot
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
As someone who has to deal with mobile perf issues, JSON
serialization/deserialization can take a lot more of a perf budget than you
realize. A flatbuffer version would definitely be faster hands down.

With gzip sizing is about the same, but processing speed wise it is not.

~~~
fulafel
Also if you gzip the binary version and the json version, the gzipped binary
is still going to be much smaller.

Same with csv data, for download size it really pays off to preprocess and
pack into arrays of binary structs before compression.

This is part of a bigger class of effects in preprocessing data before
compression, it is often surprisingly effective. For example delta coding or
columnar format (SoA vs AoS) can yield big improvements depending on data.

~~~
john_reel
See: precomp, lrzip, srep

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

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

~~~
Matthias247
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.

~~~
neovive
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
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.

------
valine
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
How do you directly render SVG in your mobile apps currently?

Have you tried font-iconification services like
[http://fontastic.me/](http://fontastic.me/) ?

------
sschueller
Why can't this just be MIT licensed?

------
mareck16
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
very well polished... will check it out

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

~~~
hackcrafter
Exactly!

This should be wrappable by a React Native Component, it really is screaming
for somebody to do that...

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

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

~~~
johansch
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.

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

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

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

~~~
seanwilson
> 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
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
> 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
>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.

~~~
seanwilson
Flash isn't supported on mobile browsers (now), native Android or native iOS
though.

~~~
misio
Oh, absolutely. It was a heavy implementation of a similar solution and the
mobile ecosystem is better off without it.

------
debt
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
Facebook spending a developer year on it is like your average dev shop
spending 5 minutes of your time on the daily stand-up.

------
nickmain
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/)

------
puppetmaster3
Or, be a winner and use GSAP.

Just saying.

------
omouse
Why not APNG?

~~~
seanwilson
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.

