UI animations can enhance the user experience by adding depth, hierarchy, and responsiveness that is missing from flat designs. In Meteor, animations are challenging due to the reactive nature of the DOM. The _uihooks feature can be used to manipulate elements before they are added or removed from the page to implement basic animations. Several Meteor packages also exist to help with animations using approaches like CSS, JavaScript libraries, and hooks into reactive updates.

1. UI Animations in Meteor
Nick Wientge
http://exygen.io

2. Why use animations in your UI?

3. Because it looks cool!

4. NO.

5. Flat Design
Flat design often removes
any sense of depth or
hierarchy from an interface.
Motion can add it back.

6. Mobile
Mobile apps have raised
the bar for responsiveness
and interactivity. The web
is playing catch up.

7. Ok, it looks cool
And lastly, because it looks
cool :) UI Animations, if done
well, add a sense of polish to
your app

8. Current State of Web UI Animation

9. jQuery
$('#modal').slideDown('fast');
• Limited animations
• Poor performance on mobile

10. CSS
.modal {
position: absolute;
top: 40px;
transition: top 0.3s ease-out;
}
.modal.hidden {
top: -500px;
}
• Typically better performance
• Sometimes 'hardware accelerated'
• But the syntax can be awkward

11. JavaScript
Velocity.js, jQuery.transit, GreenSock, etc
$("#modal").velocity({top: 50}, 300, "easeout");
• Best of both worlds?
• Or are animations 'presentational'
and belong in CSS?

12. UI Animations in Meteor

13. Challenges?

14. Reactivity
You don't always know exactly when or where
elements will be added to (or removed from) the page

15. Examples
• Adding/removing elements from a list
• Showing/hiding elements based on state
• Transitions between iron:router routes

16. _uihooks
• Undocumented feature (prefixed with an underscore)
• Allows you to manipulate an element before Meteor
adds it or removes it
• Not a perfect solution, but good enough for most
cases

17. Demo

18. Demo
Using Ratchet, Iron Router and
_uihooks to recreate iOS
navigation.
http://mailbox.meteor.com/
https://github.com/nickw/
meteor-mailbox

19. Resources

20. UI Animation Resources
Google Material Design
http://www.google.com/design/spec/animation/authentic-motion.html
The State Of Animation 2014
http://www.smashingmagazine.com/2014/11/18/the-state-of-animation-2014/
The Art of UI Animations (Slides)
http://markgeyer.com/pres/the-art-of-ui-animations
Foundation for Apps: Motion UI is the New Flat
http://zurb.com/article/1340/foundation-for-apps-motion-ui-is-the-new-
Animation Principles in UI Design: Understanding Easing
https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-
easing-bea05243fe3
Faster UI Animations with Velocity.js
http://www.smashingmagazine.com/2014/06/18/faster-ui-animations-with-velocity-js/

21. Meteor Animation Packages
Bender
https://github.com/groupbuddies/meteor-bender
Animation Hooks
https://github.com/strack/meteor-animation-hooks/
Animated Each
https://github.com/mizzao/meteor-animated-each
Momentum (CSS & Velocity)
https://github.com/percolatestudio/meteor-momentum
Momentum Iron Router
https://github.com/percolatestudio/momentum-iron-router
Animation Helper
https://github.com/frozeman/meteor-animation-helper
Animation Helper (Velocity)
https://github.com/frozeman/meteor-animation-helper-velocity