gistfile1.txt

vjeux [8:58 PM]
i'd love to get feedback on the code

vjeux [8:58 PM]
i'm working on a new animation api for react and react native

robertjpayne [8:59 PM]
@vjeux have you ever seen the greensock TweenLite/TweenMax stuff?

vjeux [8:59 PM]
@robertjpayne someone mentioned it to me last week but haven't dug that much

robertjpayne [9:00 PM]
It was really popular with Flash, I used it heaps and still remains to this day my favourite API’s for making animations / animation timelines

robertjpayne [9:00 PM]
They have a JS version which can animate arbitrary properties, works great with react-native

vjeux [9:01 PM]
one thing i struggle a lot with is that all those libraries show demos that are very far from what you would do in real life

vjeux [9:01 PM]
so i'm not really sure how to evaluate them

robertjpayne [9:02 PM]
Yea, the demo is pretty surreal, I suppose the hardest piece of any animation library isn’t actually single tweens, that is easy with UIKit / Pop / etc…

robertjpayne [9:02 PM]
Sequencing animations properly that can be interactively driven or time driven, reversed, interuppted etc… is very difficult

vjeux [9:02 PM]
yup :P that's what i'm currently focusing on

robertjpayne [9:03 PM]
That’s what greensock stuff has TimelineLite/TimelineMax, I’d have a look

vjeux [9:03 PM]
my idea is that we have a variable that controls the animation progress

vjeux [9:04 PM]
and then from that progress (i call it `current` right now), you use interpolation directly in render to display it

robertjpayne [9:04 PM]
With react it’s an interesting concept, because I’m unsure what happens if state changes and require’s a re-renderwhile your midway in an animation.

vjeux [9:04 PM]
and, what drives the progress is either time (Animation) or gesture

robertjpayne [9:04 PM]
yup

vjeux [9:05 PM]
yeah, so this is the tricky part. The way I model it is that the animation is expressed in render, so if you re-render, it just works fine

vjeux [9:05 PM]
but, triggering a full re-render on every animation is expensive

vjeux [9:05 PM]
so what i'm doing is that instead of current being a real value, it's what i call a "binding" (there's probably a better name)

robertjpayne [9:06 PM]
I’m pretty new to react so I’m not entirely sure how the diffing engine works and sorts and the caveats

vjeux [9:06 PM]
whenever a binding is used to render an element, we can annotate the element, style and attribute onto the binding

vjeux [9:07 PM]
so that whenever the progress is updated again, it can directly update the style without doing a re-render

vjeux [9:07 PM]
http://vjeux.github.io/anim/anim.html

vjeux [9:07 PM]
view the source to get an idea of the developer API

vjeux [9:07 PM]
it has gesture (when you swipe) and animations (when you release)

robertjpayne [9:09 PM]
pretty slick though the click animations are really jerky ( if you click on titles )

vjeux [9:10 PM]
robertjpayne: yeah i spent exactly 0 seconds optimizing this

vjeux [9:10 PM]
i'm not sure why the title is soooo slow

vjeux [9:11 PM]
need to investigate

robertjpayne [9:11 PM]
one thing in react-native, there’s no way to get the current “nativeProps” of an element is there? One thing that’s hard for animation is having no idea where the start point is.

vjeux [9:12 PM]
there isn't indeed

vjeux [9:12 PM]
we haven't needed it so far

vjeux [9:12 PM]
but the value exists somewhere in the internals of react

vjeux [9:15 PM]
robertjpayne: do you have examples of animations you'd like to write?

vjeux [9:15 PM]
i'd love to try building them using the api i'm prototyping

robertjpayne [9:21 PM]
Hmm trying to think of some I’ve seen

robertjpayne [9:22 PM]
I’m mostly into sort of really immersive “onboarding” screens, that are currently untouched because they’re mostly just unfeasible.

robertjpayne [9:22 PM]
it’s like skip intro for the mobile app :S

robertjpayne [9:22 PM]
but so many people just do a left to right slider that is really boring