Using $timeline, doesn't see to animate

[osiloke]

Hi there, scanning through the docs, the $timeline service is mentioned but there's no example on how to actually run an animation. If someone could help out with a quick example. I'm still looking through the code and docs to try and figure out how everything works. The docs always references some sort of animate function but there's never an example.

[steveblue]

https://github.com/Famous/famous-angular/blob/master/docs/unstable/service/%24timeline/index.md

[andrelevi]

You can see a barebones example at https://github.com/andrelevi/famous-angular-ui-router-example. The $timeline-based animating is also used in conjunction with the Famo.us/Angular ui.router integration.

[zackbrown]

We also want to make the $timeline service a bit more approachable—currently it's powerful, but fairly low-level. Some syntactic sugar for things like staggering, sequencing, orchestrating (multiple actors on the same timeline,) and binding $timeline functions to fa-modifiers would be nice to have. The source for the new project site also has some good non-trivial examples. https://github.com/thomasstreet/famous-angular-docs/tree/development/app

Basic idea is you provide an array of steps, each step itself an array, where the first element of that step-array is the time domain (for clarity, it's nice to keep this bounded between 0 and 1; pretty much 0% and 100% of the timeline); the second element of the array is the range, e.g. the value of a Translation at the time you specified in the first element. The range can be multidimensional, e.g. a 3D translation (so, yet another array.) So consider this case where you want to interpolate between [10, 10, 10] and [50, 50, 50]. The following code returns a function that deals with the range (0,1) and will return [10, 10, 10] if you pass in 0, will return [50, 50, 50] if you pass in 1, and will return a value in between the two, interpolated over the provided easing curve (Easing.inQuad in this case,) if you pass some value in the middle (like .5 or .75).

var myFunction = $timeline([
  [0, [10, 10, 10], Easing.inQuad],
  [1, [50, 50, 50]]
]);

myFunction(0); // [10, 10, 10]
myFunction(1); // [50, 50, 50]

You can create a Transitionable that acts as the actual driver of the timeline—start it at 0, set it to 1 with a duration (and probably a linear curve,) and pass the value of its .get() into the function returned by $timeline. The value you get from that can be bound to a fa-modifier's fa-translate, thus when you set that one Transitionable from 0 to 1, you will cause that modifier to be translated from [10,10,10] to [50,50,50] with an in-quadratic curve.

Complicated, but powerful—again, I think we need to expose some syntactic sugar. If you or anyone has any ideas for how that sugar could look, contributions (even dialogue) would be welcome!

[osiloke]

Ok, this makes more sense now. Its just supposed to be some syntatic sugar. You could just set the properties directly in the Transitionable object everytime you want to animate to a certain state, but this makes it easier to manage these states. Thanks alot guys.