Ember.js: Animations with jQuery .animate()

Animating an element with jQuery is as simple as:

But how would we integrate animations with Ember.js Views? For example, we may want to animate an element upon some user action (click, mouseover, etc.). The straightforward solution is to call jQuery.animate() within the function that receives the user action event. So if for example we want to slide down a navigation panel on mouseover:

Although this code will work as expected, mixing jQuery code within Ember objects is a bad practice and will lead to repeated code. Also, switching to another JS library such as Dojo or Ext JS, would require some major refactoring.

Instead, based on ideas from Ember.js creator Yehuda Katz (here and here), we can utilize Ember.js Observers. Specifically, we define a Mixin that sets observers on a set of CSS properties. Whenever a CSS property is changed an animate() function is called, that performs the actual animation. Here’s the code for the Mixin:

Including the above Mixin to a View, enables it to animate any CSS property defined in the cssProperties array. By default, it observes (almost) all CSS properties, so be careful with that.

Back to our simple Navigation Panel example, we include the JQ.Animate mixin in App.NavPanelView, and then just change change the height property of the View on mouseover/mouseout:

Written by Panagiotis Panagi

Panagiotis Panagi (Google) is the Director and Lead Developer of Dynopia. Panagiotis holds a PhD. in Electrical & Computer Engineering and has been involved in Web Technologies for more than 10 years.

Tags: ember.js  javascipt  jQuery 

9 Comments

Leave a Comment