A presentation at Clarity in in 5000 Estate Enighed, Independence, KS 67301, USA by Sarah Drasner
Composable animation
The Goal
Communicating @sarah_edo
? @sarah_edo
Happiness sadness Fear curiosity @sarah_edo
Happiness sadness Fear curiosity @sarah_edo
@sarah_edo
@sarah_edo
Anything can happen
SARAH DRASNER @SARAH_EDO
Branding And personality
@sarah_edo
dribbble.com/leoleung @sarah_edo
tympanus.net/Development/ImageRevealHover/ @sarah_edo
Easing
codepen.io/sdras/pen/pyedJE css-tricks.com/comparison-animation-technologies/
@sarah_edo
codepen.io/sdras/pen/qOdwdB @sarah_edo
Create beautiful defaults (from THE Jina!) @sarah_edo
@sarah_edo
@sarah_edo
Chris Gannon gannon.tv/products/download-dot-bounce @sarah_edo
codepen.io/sdras/pen/LEorev @sarah_edo
Having an opinion @sarah_edo
dribbble.com/rally @sarah_edo
dribbble.com/outcrowd @sarah_edo
dribbble.com/uigreat @sarah_edo
dribbble.com/Yar_Z @sarah_edo
dribbble.com/advancedgroup @sarah_edo
codepen.io/sdras/pen/gWWQgb @sarah_edo
Look around you Study reality
Unpopular opinion: Stop using material design as your motion design
codepen.io/sdras/pen/JbaGwg @sarah_edo
“It’s important to define your audience for your documentation early.” Val head, designing interface animation
Have a bdfl ... but also support @sarah_edo
Composing Creating Beautiful Defaults @sarah_edo
codepen.io/sdras/pen/qqVrxy @sarah_edo
Timing Like h1, h2 //---timing ----// $class-slug: t !default; @for $i from 1 through 7 { .#{$class-slug}-#{$i} { animation-duration: 0.8 - (0.1s * $i); } } @sarah_edo
Easing Branded //---ease ----// $easein-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); $easeout-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); $easein-back: cubic-bezier(.57, .07, .6, 1.71); $easeout-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); .entrance { animation-timing-function: $easeout-quad; } @sarah_edo
Animations Only what you need //animations @keyframes pop { 0% { transform: scale(0.9) translateZ(0); } 100% { transform: scale(1) translateZ(0); } } .pop { animation-name: pop; @extend .anim-fill-both; } @sarah_edo
@sarah_edo
@sarah_edo
@sarah_edo
<TransitionGroup> { this.state.shouldShowSoundwaves && <Soundwaves outTime={0.5} drawTiming={5} elTime={1} easing=‘Circ’ /> } </TransitionGroup> @sarah_edo
Vue Single File Components <template> <div> </div> </template> <script> export default { } </script> <style scoped> </style> @sarah_edo
Import Global Sass Files for Overarching Principles module.exports = { css: { loaderOptions: { sass: { data: @import "@/scss/_variables.scss"; } } } }
css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/ @sarah_edo
@sarah_edo
<template> <svg @click="makeHeart" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 120 120" aria-labelledby="heartface" role="presentation"> ... </svg> </template> <script> import { TweenMax, TimelineMax, Sine } from ‘gsap' export default { methods: { makeHeart() { const tl = new TimelineMax() tl.add('start') ... } } } </script> github.com/sdras/vue-sample-svg-icons @sarah_edo
Responsive interactions Desktop and mobile compatible Zingtouch Hammer Draggable Flickity onMouseOver || onTouchStart @sarah_edo
Responsive consistency • SVG is great for responsive • Eases should stay the same, but timing can be adjusted • initial-scale=1.0 in the meta tag or device will wait 300ms • Larger touch-target, > 40px x 40px or use @media(pointer:coarse) 24ways.org/2016/animation-in-design-systems/ @sarah_edo
page transitions
@sarah_edo
Templates in the pages directory <nuxt-link to="/product">Product</nuxt-link> @sarah_edo
@sarah_edo
Transition hook already available name=“page" .page-enter-active, .page-leave-active { transition: all .25s ease-out; } .page-enter, .page-leave-active { opacity: 0; transform: scale(0.95); transform-origin: 50% 50%; } .page-enter-active, .page-leave-active { transition: all .25s ease-out; } .page-enter, .page-leave-active { opacity: 0; transform: scale(0.95); transform-origin: 50% 50%; } @sarah_edo
@sarah_edo
Js hooks export default { transition: { mode: 'out-in', css: false, enter (el, done) { let tl = new TimelineMax({ onComplete: done }), spt = new SplitText('h1', { type: 'chars' }), chars = spt.chars; TweenMax.set(chars, { transformPerspective: 600, perspective: 300, transformStyle: 'preserve-3d' }) } tl.add('start') tl.from(el, 0.8, { scale: 0.9, transformOrigin: '50% 50%', ease: Sine.easeOut }, 'start') ... tl.timeScale(1.5) @sarah_edo
@sarah_edo
Repo https://github.com/sdras/nuxt-type Demo https://nuxt-type.now.sh/ @sarah_edo
Native-like page transitions
@sarah_edo
@sarah_edo
@sarah_edo
In store/index.js import Vuex from 'vuex' const createStore = () =>" { return new Vuex.Store({ state: { page: 'index' }, mutations: { updatePage(state, pageName) { state.page = pageName } } }) } export default createStore @sarah_edo
In middleware/pages.js: export default function(context) { // go tell the store to update the page context.store.commit('updatePage', context.route.name) } register the middleware in nuxt.config.js: module.exports = { … router: { middleware: 'pages' } } @sarah_edo
In layouts/default.vue: <template> <div> <app-navigation /> <nuxt/> </div> </template> In AppNavTransition.vue: <h2 key="profile-name" class="profile-name"> <span v-if="page ===$$ 'group'" class="user-trip">{{ selectedUser.trip }}</span> <span v-else>{{ selectedUser.name }}</span> </h2> @sarah_edo
<transition-group /> Flip under the hood Rosario’s article @sarah_edo
Transition Group wraps it... <transition-group name="layout" tag="g"> <rect class="items rect" ref="rect" key="rect" width="171" height="171"/> ... </transition-group> Styles: .items, .list-move { transition: all 0.4s ease; } .active { .rect { transform: translate3d(0, 30px, 0); } ... } @sarah_edo
@sarah_edo
My Demo vue/nuxt page-transitions.com github.com/sdras/page-transitions-travelapp Simona Cotin fork angular/typescript github.com/simonaco/page-transitions-travelapp Shawn wang fork react/next github.com/simonaco/page-transitions-travelapp @sarah_edo
Animate CSS Grid github.com/aholachek/animate-css-grid/ @sarah_edo
Give life to our work
Thank you! @sarah_edo
Design Systems have changed the way that developers and designers collaborate on fonts, colors, UI structure, forms and the like. So why does it feel like animation in a design system always falls short? The animation section usually lays dormant aside from a "fade", or we craft one-offs for a perfect experience, but each perfect experience becomes less perfect because they don't share the same language. In this talk, we'll break down exactly how to build animations so that they're composable, extendable, and can be used for a multitude of purchases, and still maintain cohesion. We'll talk about how animation in specific requires teams to work together because it's an intersection of design and development: it's harder to throw over a wall. We'll break down exactly how to make it all fit together, for the most seamless collaboration between you and your team.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.