1. @RachelNabors
.com

2. Vue in Motion
where and how to use UI animation in your app
in space

3. WebAnimationWeekly.com
slack.AnimationAtWork.com

4. devtoolschallenger.com

5. lightningdesignsystem.com/design/
motion

6. Some bad news.

12. cdpn.io/collection/DgmzgG

15. Animation is a necessary part of
your complete and balanced user
experience.

18. bkaprt.com/aaw

19. master the basics and the rest will follow
CSS Transitions

20. A CSS transition describes
how a element should show a
change to one of its CSS
properties.

21. color: blue color: pink
transition: color 800ms;

22. old value
transition: color 800ms;
new value

23. .ball {
}
.ball {
transition: <property> <duration> <delay> <easing>;
}
so this must
be the delay
duration alwayscomes first
Not today, Satan!

24. cdpn.io/XEJMdq

25. CSS Animations and Transitions:
the Definitive Course
rachelnabors.com/css-animations-course

26. gosh this looks familiar
Anatomy of Vue Animations

27. <transition name="warpdrive">
<p v-show="truthy">Thing to animate</p>
</transition>
<transition>
<p v-show="truthy">Thing to animate</p>
</transition>
<transition>
</transition>

28. cdpn.io/pen/GxmEmX

29. So you think you can <transition>?
• Dynamic components
• Component root nodes
• Condi9onal rendering using v-if
• Condi9onal display using v-show

30. Planning to change
an element frequently?
Use v-show!

31. cdpn.io/pen/GxmEmX

32. class-based anima6ons
Hooks for Animating with CSS

33. <transition name="unCloaked"></transition>
.v-enter,
.v-enter-to,
.v-enter-active,
.v-leave,
.v-leave-to,
.v-active
Creates name-spaced CSS classes…

34. <transition name="unCloaked"></transition>
.unCloaked-enter,
.unCloaked-enter-to,
.unCloaked-enter-active,
.unCloaked-leave,
.unCloaked-leave-to,
.unCloaked-active
Creates name-spaced CSS classes…

35. <transition name="uncloak"><ship v-show="shipUncloaked" /></transition><transition name="uncloak"><ship v-show="shipUncloaked" /></transition><transition name="uncloak"><ship v-show="shipUncloaked" /></transition>
shipUncloaked : true
.uncloak-enter .uncloak-enter-to

36. shipUncloaked : true
<transition name="uncloak"><ship v-show="shipUncloaked" /></transition>
.uncloak-enter-to {
opacity: 1;
}
.uncloak-enter {
opacity: 0;
}

37. .uncloak-enter-active {
transition: opacity 800ms;
}
<transition name="uncloak"><ship v-show="shipUncloaked" /></transition>
shipUncloaked : true
.uncloak-enter-to {
opacity: 1;
}
.uncloak-enter {
opacity: 0;
}

38. <transition name="uncloak"><ship v-show="shipUncloaked" /></transition><transition name="uncloak"><ship v-show="shipUncloaked" /></transition>
shipUncloaked : false
.uncloak-leave .uncloak-leave-to
.uncloak-leave-active
.uncloak-enter-active
shipUncloaked : true
.uncloak-enter-to.uncloak-enter

39. .ship {
opacity: 1;
}
shipUncloaked : falseshipUncloaked : true
.uncloak-leave-to
.cloak-leave-active
.uncloak-enter-active
.uncloak-leave.uncloak-enter-to.uncloak-enter
<transition name="uncloak"><ship v-show="shipUncloaked" /></transition>

40. cdpn.io/pen/GxmEmX

41. <transition name="warpdrive" appear>
<p>Thing to animate</p>
</transition>
<transition name="warpdrive">
<p v-if="truthy">Thing to animate</p>
</transition>
Appear

42. cdpn.io/pen/dmWJyg

43. for coordina6ng movements
Transition Groups

44. <transition>
<p>Other thing</p>
</transition>

45. <transition-group>
<div>Thing</div>
<p>Other thing</p>
<span>Thing</span>
</transition-group>

46. cdpn.io/XEJMdq

47. Multiple items within a
<transition group>
component?
Set a unique key on each one!

48. mo’ elements, mo’ modes
Managing toggling elements

50. cdpn.io/pen/XEJMdq

51. <transition> modes
• in-out New element animates in first, then when
complete, the current element animates out.
• out-in Current element animates out first, then when
complete, the new element animates in.

52. cdpn.io/pen/XEJMdq

53. SNAPOH

54. cdpn.io/rdjjOm

55. ‘cuz some6mes it’s already on the page
Animating static elements

56. cdpn.io/zWNNXL

57. cdpn.io/pen/zWNNXL

58. <div id="ui-panel"
v-on:click.once="activateConsole"
v-on:click="accessSystem = !accessSystem"
v-bind:class="{ ui_open : accessSystem }">

59. <div id="ui-panel"
v-on:click.once="activateConsole"
v-on:click="accessSystem = !accessSystem"
v-bind:class="{ ui_open : accessSystem }">

60. <div id="ui-panel"
v-on:click.once="activateConsole"
v-on:click="accessSystem = !accessSystem"
v-bind:class="{ ui_open : accessSystem }">

61. when you want your behavior in your JS
JavaScript Animation Hooks’

63. A “simple” animation with the
Web Animations API.

64. cdpn.io/XEgEQN

65. <transition name="uncloakJS">

66. <transition v-on:leave="uncloakJS">

67. <transition
v-on:leave="uncloakJS"
v-bind:css="false"
>

68. For fewer CSS conflicts
& better performance, set
v-bind:css="false"
when animating with JavaScript!

69. .uncloak-enter,
.uncloak-leave-to {
opacity: 0;
}
.uncloak-enter-active,
.uncloak-leave-active {
transition: opacity 1000ms;
}

70. const uncloakAnimation = starship.animate(
[
{ opacity: 0},
{ opacity: 1}
], {
duration : 1000,
fill : "both"
});

71. <transition
v-on:leave="uncloakJS"
v-bind:css="false"
>
<transition
v-on:leave="uncloakJS"
v-bind:css="false"
>

72. const app = new Vue({
el: "#starfield",
data: {
shipUncloaked: true
},
methods: {
uncloakJS: function (el, done) {
uncloakingAnimation.onfinish = done;
uncloakingAnimation.play();
}
}
});

73. const app = new Vue({
el: "#starfield",
data: {
uncloaked: true
},
methods: {
uncloakJS: function (el, done) {
uncloakingAnimation.onfinish = done;
uncloakingAnimation.play();
}
}
});

74. methods: {
uncloakJS: function (el, done) {
uncloakingAnimation.onfinish = done;
uncloakingAnimation.play();
}
}

75. methods: {
uncloakJS: function (el, done) {
uncloakingAnimation.onfinish = done;
uncloakingAnimation.play();
}
}

76. No CSS? No done? No deal!
At least when it comes to using
enter and leave JavaScript
animation hooks!

77. cdpn.io/pen/GxvWZw

78. Check out these ace
Web Animations API
resources to learn more:
rachelnabors.com/waapi

79. Giving users a choice
Accessible Animations

80. UI Animation can cause negative side effects like
• Seizures caused by flashing and blinking
• Nausea triggered by parallax mo9on
• Distrac-on and fa-gue brought on by looping anima9on

82. MediaQueriesLevel5Editor’sDra4
goo.gl/CcrVFs

83. cdpn.io/pen/zWNNXL

86. Progressive Enhancement FTW
DIY Animation Controls

87. Put the user in control.
This site uses anima,on and mo,on. Disable it?

88. cdpn.io/pen/KoXzLQ

89. Dem props!
• animationsOn: boolean
• motionQuery : matchMedia('(prefers-
reduced-motion)')
• accessibleAnimationQuerySupported: boolean
• prefersAnimation: boolean

90. cdpn.io/pen/KoXzLQ

91. cdpn.io/pen/KoXzLQ

92. What about JavaScript?

93. peaceOut : function(el){
if (this.animationsOn){
animation.play();
}
}

94. peaceOut : function(el, done){
if (this.animationsOn){
animation.play()
animation.onfinish = done;
} else {
done();
}
}

95. cdpn.io/qoPRbB

97. bkaprt.com/aaw

98. Thank you!
Chris Fritz
Sarah Drasner
And YOU!
@RachelNabors
.com
The pens: cdpn.io/collection/DgmzgG
The docs: vuejs.org/v2/guide/transitions.html
The dress: heruniverse.com