The roadmap for animation


#1

A question for the core team:

What do you have in mind for supporting animated state transitions in future versions of Ember?

A question for everyone using Ember right now:

How are you tackling animation, if at all?


#2

Very interesting question !

I was just thinking about how to implement something similar to Android’s transition animations between Activities (tutorial). I will try to follow up with a draft/gist/something if I find the time.


#3

I’d be interesting in seeing how you implemented that.


#4

I’ve heard a lot of people have been having luck with https://github.com/billysbilling/ember-animated-outlet.


#5

This pull request, merged in yesterday, is also relevant: Ability to specify the view class used by the outlet Handlebars helper


#6

I’m not sure I fully understand it yet, but it looks like the new async router will provide the hooks needed to animate state transitions; without depending on extra libraries.


#7

The async routing won’t really help you with animating route transitions. Just because you need animation, you don’t need async route transitions. The challenge is in Ember.ContainerView (what the {{outlet}} helper uses). When the currentView property changes, the container view will destroy the old route’s view, and insert the route’s view. This is what you need to intercept. And that’s exactly what https://github.com/billysbilling/ember-animated-outlet does.


#8

@seilund thanks for the awesome response, definitely clarifies the picture for me.

Do you see {{animatedOutlet}} as a good candidate for inclusion into Ember core? Perhaps adapting the existing outlet helper {{outlet transition="KenBurns"}}?


#9

Sure. That’s up to the core guys.

IMO you can’t really put the transition directly on the outlet. The transition to use varies from time to time. If you use slideLeft and slideRight you probably want slideLeft everytime you go deeper into the app, and slideRight when you go back. Like most mobile apps.


#10

Wouldn’t this be something you would typically put in a plugin or library, instead of building it into the core framework? Animating state transitions seems a rather specific feature that is perhaps only interesting for mobile apps.

This is a question out of honest curiosity, no flaming intended :-).


#11

Haha, no flame taken :slight_smile:

My take is that it wouldn’t be the state transitions themselves that would be in the core API, but more clear hooks for implementing them if/when the need arises.


#12

Ah, right, I see how that could be a useful thing to have in the core API :-).


#13

Also, this almost goes without saying: ember-animated-outlet is a fantastic piece of work. Props to @seilund and co.


#14

Ember-animated-outlet has been great, especially when combined with ember-touch. Great work @seilund!!


#15

I would also like to be able to animate the appearance (and disappearance) of content within if blocks.


#16

This discussion is now officially happening here: