Feature: (2.0) Chaining animations

[peterback]

Hi Jouni,
Great add-on, thank you!

I'm playing around with the 2.0 version and would really love to be able to chain transformations with a specified delay between each. I'll try and see if I can achieve that by sub-classing around a bit but perhaps something to put on your radar as a cool addition!

Thanks,
Peter

[jouni]

Thanks for the feedback!

Chaining wasn't really on my feature list initially, that's why it probably doesn't work really well :)

But I'll definitely see if I can add that somehow. Did you happen to have some fluent API suggestions how you'd want to define those?

[peterback]

How about something like:

Animator.animate(component, new Css()
.translateY("500px").delay(100).duration(400)
.translateY("-3px").delay(100).duration(150)
.translateY("3px").delay(100).duration(150)
);

Where the delay is cumulative so the second translation actually starts at +600ms

(You can maybe see the effect I'm after here, dropping down a component and then a subtle "bounce" before settling in place.. :) )

Thanks,
Peter

[jonguymer]

Firstly thanks for the great add on!

I was going to post asking about chaining but I see @peterback has beat me to the punch.

This would be a great addition to an already great add on!

Is this on your roadmap @JouniK ?

Cheers

Jon

[jouni]

Hi Jon,

Thanks for the feedback!

I realized after Peter asked that queuing/chaining is crucial feature to have, so I've been changing the API a bit, trying to find a fluent way to define those. Here's what I currently have, but I feel like it's still not finished.

Animator.animate(button, label).to(new Css().translateY("100%"))
          .queue(new CssAnimation(label).to(new Css().translateY("-100%")).duration(1000).delay(60))
          .queue(new CssAnimation(button).to(new Css().translateX("100%")));

So you could now pass multiple target components to the same animation, and also specify the 'from' style for each animation, and then chain animations with the 'queue' method. The queue adjust the delay of the animations only, so it doesn't actually use any end event listeners on the client, just plain timers.

The original API is starting to look a bit contrived now, so I was also thinking about changing it to something like this:

Animation.animate(new CssAnimation(targets, props [, duration [, delay [, easing]]])
                .queue(new CssAnimation(...));

So all the animation information would be passed in the CssAnimation constructor (plus they would have setters like currently), which might make slightly more readable. What do you think?

[peterback]

Hi Jouni,
Really like the idea of queuing with the ability to involve many components in a sequence of animations!

I think I'd have to agree with you that it kind broke the original way you had it and the second suggestion looks more coherent now with the same pattern repeated.

Thanks,
Peter