A gently introduction to animations in ember.js using liquid-fire. The talk was part of the Ember.js Meetup Treviso

1. LIQUID FIRE TOOLKIT
AN INTRODUCTION TO ANIMATIONS IN
EMBER
By William Bergamo / @bugduino

2. LIQUID FIRE
Ember-cli addon made by
Manage animations and transitions
It includes some default animations and
helpers
Under the hood uses
ef4
Velocity.js

3. KEY IDEA
Transitions should be implemented in views.
But who is in charge to decide what kind of transition to
use?

4. TRANSITION MAP
e x p o r t d e f a u l t f u n c t i o n ( ) {
t h i s . t r a n s i t i o n (
t h i s . f r o m R o u t e ( ' b a r ' ) ,
t h i s . t o R o u t e ( ' f o o ' ) ,
t h i s . u s e ( ' t o L e f t ' ) ,
t h i s . r e v e r s e ( ' t o R i g h t ' )
) ;
t h i s . t r a n s i t i o n (
t h i s . f r o m R o u t e ( ' b a z ' ) ,
t h i s . u s e ( ' t o U p ' ) ,
) ;
/ / . . .
}
Contains rules about how app pieces relate to each
other
Similar to The Ember router map

5. LIQUID FIRE COMPONENTS
Template
helpers
Transition map
Transitions

6. TEMPLATE HELPERS
{{liquid-outlet}}
{{liquid-with}}
{{liquid-bind}}
{{liquid-if}} / {{liquid-unless}}
{{liquid-spacer}}

7. HELPERS COMMON BEHAVIOR
Generate some DOM elements
They consult the transition map
use, class and growDuration
options
< d i v c l a s s = " l i q u i d - c o n t a i n e r " >
< d i v c l a s s = " l i q u i d - c h i l d " >
/ / C o n t e n t
< / d i v >
< / d i v >

8. LIQUID OUTLET
Animates between routes transition
LIQUID WITH
Animates the transition between different models on the
same route
LIQUID BIND
{{liquid-bind someProp}} it's the equivalent of {{someProp}},
the helper animates between value changes

9. LIQUID IF
Works like the normal ember IF helper and animates when
the value changes from true to false or the opposite
LIQUID SPACER
Do not have an equivalent Ember helper
Do not search in transition map for matching
rules
It just animates it's own width and height
changes

10. TRANSITION MAP
You can configure rules that govern which animations run at
any given moment.
The map must be located in app/transitions.js
It gives access to functions:
transition creates a transition rule with one or more
constraints and a use statement.
setDefault is used to provide default setting to Velocity.js
(e.g duration, easing, etc.)

11. CREATE RULES FOR ROUTES
fromRoute, toRoute, withinRoute are available for the
liquid-outlet
Possible parameters: route name, functions, array, null
t h i s . t r a n s i t i o n ( t h i s . f r o m R o u t e ( ' b a r ' ) , t o R o u t e ( ' f o o ' ) ,
t h i s . u s e ( ' t o L e f t ' ) ) ;
t h i s . t r a n s i t i o n (
t h i s . f r o m R o u t e ( r o u t e N a m e = > r o u t e N a m e . i n c l u d e s ( ' o o ' ) ) ,
t h i s . u s e ( ' t o L e f t ' ) ) ;
t h i s . t r a n s i t i o n (
t h i s . f r o m R o u t e ( [ ' f o o ' , ' b a r ' , r o u t e N a m e = > r o u t e N a m e = = = ' b a z ' ] ) ,
t h i s . u s e ( ' t o D o w n ' ) ) ;
t h i s . t r a n s i t i o n ( t h i s . f r o m R o u t e ( n u l l ) , t h i s . t o R o u t e ( ' b a r ' ) ,
t h i s . u s e ( ' t o U p ' ) ) ;

12. CREATE RULES FOR MODELS
fromModel
toModel
betweenModel
Possible parameters: same as before.
CREATE RULES FOR VALUES
fromValue
toValue
betweenValues
They accept only one parameter: function, regexp, boolean,
string, number or null (which will match null or undefined)

13. hasClass
CREATE RULES FOR DOM
< d i v i d = " c o n t a i n e r " >
{ { l i q u i d - i f i s O p e n c l a s s = " s p a c e r " } } o p e n { { / l i q u i d - i f } }
< / d i v >
t h i s . t r a n s i t i o n ( t h i s . h a s C l a s s ( ' s p a c e r ' ) , t h i s . u s e ( ' t o D o w n ' ) )
matchSelector
t h i s . t r a n s i t i o n ( t h i s . m a t c h S e l e c t o r ( ' . s p a c e r ' ) , t h i s . u s e ( ' t o D o w n ' ) )
childOf
t h i s . t r a n s i t i o n ( t h i s . c h i l d O f ( ' # c o n t a i n e r ' ) , t h i s . u s e ( ' t o D o w n ' ) )
inHelper
t h i s . t r a n s i t i o n ( t h i s . i n H e l p e r ( ' l i q u i d - i f ' ) , t h i s . u s e ( ' t o D o w n ' ) )

14. TRANSITIONS
implement animation between two states, manipulate the
DOM to pass from the old view's value to the new one.
PREDEFINED
toLeft, toRight, toDown,
toUp
fade, crossFade
explode
fly-to

15. EXPLODE
You can animate every single piece of the template.
It accepts any number of objects as argument, and every
object must have a use property.
t h i s . t r a n s i t i o n (
t h i s . c h i l d O f ( ' # c o n t a i n e r ' ) ,
t h i s . u s e ( ' e x p l o d e ' , {
p i c k N e w : ' . s p a c e r ' , u s e : ' t o D o w n '
} , {
p i c k N e w : ' . b r e a d c r u m b s ' , u s e : ' t o L e f t '
} , { / / f o r a l l o t h e r e l e m e n t s
u s e : ' f a d e '
}
}

16. CUSTOM TRANSITIONS
Must be located in app/transitions/transition-name.js
There are different animation primitives available
i m p o r t { s t o p , a n i m a t e , P r o m i s e } f r o m " l i q u i d - f i r e " ;
e x p o r t d e f a u l t f u n c t i o n r o t a t e B e l o w ( o p t s = { } ) {
v a r d i r e c t i o n = 1 ;
i f ( o p t s . d i r e c t i o n = = = ' c w ' ) {
d i r e c t i o n = - 1 ;
}
s t o p ( t h i s . o l d E l e m e n t ) ;
i f ( t h i s . o l d E l e m e n t ) {
t h i s . o l d E l e m e n t . c s s ( ' t r a n s f o r m - o r i g i n ' , ' 5 0 % 1 5 0 % ' ) ;
}
i f ( t h i s . n e w E l e m e n t ) {
t h i s . n e w E l e m e n t . c s s ( ' t r a n s f o r m - o r i g i n ' , ' 5 0 % 1 5 0 % ' ) ;
}
r e t u r n P r o m i s e . a l l ( [
a n i m a t e ( t h i s . o l d E l e m e n t , { r o t a t e Z : - 9 0 * d i r e c t i o n + ' d e g ' } , o p t s ) ,
a n i m a t e ( t h i s . n e w E l e m e n t , { r o t a t e Z : [ ' 0 d e g ' , 9 0 * d i r e c t i o n + ' d e g ' ] } , o p t s )

17. PROBLEMS ENCOUNTERED
Not all feature are available in oldStable
branch
overflow: hidden
'hidden' features -> liquid-animating
Bug with position: fixed and chrome
PR#209
Issue#197
Quick fixes
. l i q u i d - c o n t a i n e r . l i q u i d - a n i m a t i n g {
o v e r f l o w : h i d d e n ;
}
. l i q u i d - c o n t a i n e r > . l i q u i d - c h i l d ,
. l i q u i d - c o n t a i n e r {
t r a n s f o r m : i n i t i a l ;
o v e r f l o w : i n i t i a l ;
}

18. EXAMPLES

19. Contacts:
THANK YOU!
@bugduino
www.pitchtarget.com
http://hackatron.org/
Ember.js Treviso Meetup