Select Page

Since the early days of the web, designers and developers have been looking for ways to animate and transition web elements, such as text and graphics. Initially, the animations were made to call the attention of the users, to have a wow factor using Flash (mainly). Designers copied the trendy effects and people started to hate all those useless animations.
However, with the release of single page applications, in which the user can interact with a web app or mobile app in real time, animations and transitions are very important to maintain the user awareness about what is going on with the app. They allow users to understand how items on a list are been added, removed or sorted. Furthermore, since many users can interact with an app simultaneously, real times updates can get messy without a proper mechanism to inform the user about the changes that are taking place.

Dominic Nguyen gave a great presentation called Design for Real-time during the Devshop SF in June 2015 which is shown below.

Summarizing, there are three principles of how to approach real time:

  1. Be State Aware – The user should know the state of the system. Examples include:
    • Connection status – is the user aware when the connection is broken?
    • Loading – Is the application loading new data on the background?
    • Confirmation – Is the app informing the user that her action was successful or failed?
  2. Expect Change – The user should know what to expect. Typical cases include:
    • Communicate results – How the app informs the user that new content is available?
    • Skeleton templates – While loading new data, the app can display a skeleton of the template that will be filled by that data. For example, the way Facebook displays new post that are been loaded.
  3. Preserve Context – The user should know where the content comes from and where it belongs. These are some examples:
    • Consistent placement – is new content appearing as expected?
    • Maintain bearings – Are state changes articulated? In this case animations are a good way to provide context of the changes.
    • Saving scroll position – When the user was taken to a different view (via direct interaction), does she end up in the same place when going back?

Currently, there is no animation support on core (the official Meteor first party packages) that will allow developers to define animations and to associate them with parts of a template. This could allow to specify animations and /or transitions when a field changes, or when new items are added or removed. There is a task on the Meteor Roadmap on Trello on the future list where people are voting and commenting about this. Meanwhile, there are some packages (third party) that allow implementing animations using CSS animations and _uihooks. Some of those packages are:

meteor-momentum –  As far as I know, it allows animating when items are added or removed from a template. I haven’t been able to see how to use it to animate an item when its value changes (a preexisting item).

meteor-animate – Matthew Platts recently made available this package that support CSS animations. He put this package after he published an article about Meteor animations. Using this package the code on a template with some transitions looks like:


<ul>
 {{#transition in="zoomIn:500" out="bounceOut:2000"}}
   {{#each items}}
      <li class="animated out">{{name}}</li>
   {{/each}}
 {{/transition}}
</ul>

[Edit]: Gwendall Esnault pointed out on the comments about his package meteor-template-animations that seems to work well as well.

Other alternatives include:

meteor-famous-views – It is (was) a promising package based on the Famous Engine. However, it seems that Famous is going through a crisis and thus Gadi Cohen (the author of the meteor famous views package) will no longer be using the official Famous. You should check that package from time to time to see what Gadi is coming out with. There is a community fork let by some developers.

Velocity.js – Velocity.js (official) – accelerated JavaScript animation. Velocity is an animation engine with the same API as jQuery’s $.animate(). It works with and without jQuery. It’s incredibly fast, and it features color animation, transforms, loops, easing, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. You can read the documentation here and see additional articles and tutorials on Smashing Magazine, CSS-TRICKS, and here. With Velocity is possible to animate field change values or when items are added or removed from a template. For the later, it is useful to also use a package such as meteor-animation-helper-velocity.

GreenSock – GSAP – GSAP is a powerful HTML5 animation engine that allows animating just about anything. You can find more information and tutorials at the GreenSock site and also at many other places, including on Smashing Magazine, and here, here and here among many others.

On my next article I would show how to animate the countdown timer using velocity.js and GSAP. In that case there is no real need for the animations, at least from the point of view of the three principles described by Dominic Nguyen. However, there is also another use of transitions and animations, when used with moderation: to wow the audience. I am sure you have seen cool animated countdown timers before, so I don’t think I will break any new ground there for that:)

If you know how to use meteor-momentum and/or meteor-animate to animate the countdown timer, please describe your approach in the comments below.

 

Subscribe to MeteorLife  Blog

Subscribe to MeteorLife  Blog

Get notifiied when new content is available as well as when we launch special promotions for our course  Create Web Apps with Meteor & React

Thanks. You have successfully subscribed!