UI Animations in Meteor

Using _uihooks to animate UI elements in your Meteor.js apps.

Transcript

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 $("#modal").velocity({top: 50}, 300, "easeout"); • Best of both worlds? • Or are animations 'presentational' and belong in CSS? Velocity.js, jQuery.transit, GreenSock, etc
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