Ember-animate.js

Design
1

Doing animations in and between EmberViews is made easy with ember-animate.js.

The hooks that are provided seem really useful. Does anyone has experience with them? Is this something that might be implemented into the Ember core someday? Or should I be carefull with this?

  • willAnimateOut()
  • didAnimateIn()
  • didAnimateOut()
  • animateIn(callback)
  • animateOut(callback)
2

I don’t believe there are any plans for these specific hooks to be made available in core, as there are existing hooks that allow for great animations already, which is what is used by libraries like liquid-fire.

3

(disclaimer, I’m the author of liquid-fire)

There has been idle speculation about whether liquid-fire may someday belong in core. We have actually gotten surprisingly far without any changes to Ember at all, and without depending on much in the way of private APIs. So it’s not clear that it needs to be part of core. Maybe someday after lots of people have battle-tested the API, it would be worth considering.

But I will toot my own horn a little and point out that several Ember core team members are happily using liquid-fire in their own projects, which bodes well for the long-term health of the library.

2 Likes
4

Actually, that isn’t quite right: “most of Ember core team” would be more accurate. Toot away!

4 Likes
5

The existing hooks are actually quite problematic and don’t allow for good animation support out of the box. Namely, there is no way to easily trigger out animations using Ember’s native hooks.

However, from what I’ve heard from core team members, real animation hooks are supposed to be part of the metal-views rework. So they should hit the same time HTMLBars does, unless this is no longer the case.

I wrote ember-animate so I could easily add animations to my views in Ember apps. I also dislike the idea of tying animations to routes. I think how something behaves visually strictly belongs in views, but that’s my two cents.

It’s also only 258 lines of code, with no dependencies, so the footprint is pretty small.

6

Ok, thanks for all the responses. I’ll dig into liquid-fire first.

@gigafied Hope to see some more advanced animation hooks built into Ember Views. Are there some implementation details / roadmap to read somewhere?