The Future of Web Animation

A presentation at Concatenate in October 2019 in Lagos, Nigeria by Sarah Drasner

Slide 1

THE Future of WEB Animation

Slide 2

Before we begin.. @sarah_edo

Slide 3

@sarah_edo

Slide 4

@sarah_edo

Slide 5

@sarah_edo

Slide 6

THE Future of WEB Animation

Slide 7

@sarah_edo

Slide 8

Communicating @sarah_edo

Slide 9

? @sarah_edo

Slide 10

Happiness sadness Fear curiosity @sarah_edo

Slide 11

Happiness sadness Fear curiosity @sarah_edo

Slide 12

@sarah_edo

Slide 13

@sarah_edo

Slide 14

Anything can happen

Slide 15

SARAH DRASNER @SARAH_EDO

Slide 16

page transitions

Slide 17

@sarah_edo

Slide 18

Vue Single File Components <template> <div></div> </template> <script> export default { } </script> <style scoped> </style> @sarah_edo

Slide 19

<nuxt-link to=”/product”>Product</nuxt-link> Livecode Nuxt Resource @sarah_edo

Slide 20

@sarah_edo

Slide 21

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%; } @sarah_edo

Slide 22

@sarah_edo

Slide 23

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

Slide 24

@sarah_edo

Slide 25

@sarah_edo

Slide 26

Repo https://github.com/sdras/nuxt-type @sarah_edo

Slide 27

Native-like page transitions

Slide 28

@sarah_edo

Slide 29

Cognitive Load Kathy Sierra: Badass, Making Users Awesome @sarah_edo

Slide 30

@sarah_edo

Slide 31

@sarah_edo

Slide 32

@sarah_edo

Slide 33

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

Slide 34

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

Slide 35

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

Slide 36

<transition-group /> Flip under the hood Rosario’s article @sarah_edo

Slide 37

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

Slide 38

//animations .place { .follow { transform: translate3d(-215px, -80px, 0); } .profile-photo { transform: translate3d(-20px, -100px, 0) scale(0.75); } .profile-name { transform: translate3d(140px, -125px, 0) scale(0.75); color: white; } .side-icon { transform: translate3d(0, -40px, 0); background: rgba(255, 255, 255, 0.9); } .calendar { opacity: 1; } } @sarah_edo

Slide 39

@sarah_edo

Slide 40

My Demo vue/nuxt css-tricks.com/native-like-animations-for-page-transitions-on-the-web/ github.com/sdras/page-transitions-travelapp Simona Cotin fork angular/typescript github.com/simonaco/page-transitions-travelapp Shawn wang (swyx) fork react/next github.com/sw-yx/page-transitions-react-travelapp @sarah_edo

Slide 41

Next-level responsive

Slide 42

@sarah_edo

Slide 43

@sarah_edo

Slide 44

@sarah_edo

Slide 45

@joshcarpenter @sarah_edo

Slide 46

@joshcarpenter @sarah_edo

Slide 47

@joshcarpenter @sarah_edo

Slide 48

@joshcarpenter @sarah_edo

Slide 49

Index page design inspired from this dribbble shot @sarah_edo

Slide 50

methods: { startDrag() { this.dragging = true this.x = this.y = 0 }, stopDrag() { this.dragging = false }, coords(e) { if (this.page ===$$ ‘vrview’ && this.dragging) { this.x = (e.clientX || e.touches[0].clientX) / 60 + 4 this.y = (e.clientY || e.touches[0].clientY) / 100 + 5 } }, … } @sarah_edo

Slide 51

<div v-if=”page ===$$ ‘vrview’” :style=”{ perspectiveOrigin: `${x}% ${y}%`, transform: `rotateY(${x * 4}deg)` }”> <app-nav /> </div> <app-nav v-else/> <nuxt /> <div class=”movearound” v-if=”page ===$$ ‘indview’ || page ===$$ ‘vrview’” :style=”{ perspectiveOrigin: `${x/2}% ${y/2}%`, transform: `rotateY(${x*4}deg) translate3d(0, 0, 0)` }”> <app-bottommain :x=”x” :y=”y” /> </div> @sarah_edo

Slide 52

this.scene = new THREE.Scene() var geometry = new THREE.SphereBufferGeometry(500, 60, 40) // invert the geometry on the x-axis so that all of the faces point inward geometry.scale(-1, 1, 1) var material = new THREE.MeshBasicMaterial({ map: new THREE.TextureLoader().load(imgsrc) }) mesh = new THREE.Mesh(geometry, material) this.scene.add(mesh) @sarah_edo

Slide 53

update() { lat = Math.max(-85, Math.min(85, lat)) phi = THREE.Math.degToRad(90 - lat) theta = THREE.Math.degToRad(lon) camera.target.x = 500 * Math.sin(phi) * Math.cos(theta) camera.target.y = 500 * Math.cos(phi) camera.target.z = 500 * Math.sin(phi) * Math.sin(theta) camera.lookAt(camera.target) renderer.render(scene, camera) } @sarah_edo

Slide 54

div { width: 500px; height: 500px; } border-radius: 50%; } @media vr { div { material: grass; } } @sarah_edo

Slide 55

sphere { material: envmap(0.9) reflectivity(0.5); } threejs.org/examples @sarah_edo

Slide 56

@joshcarpenter @sarah_edo

Slide 57

@sarah_edo

Slide 58

@sarah_edo

Slide 59

supermedium.com @sarah_edo

Slide 60

supermedium.com/supercraft @sarah_edo

Slide 61

ARKit 2.0 @OsFalmer @sarah_edo

Slide 62

@sarah_edo

Slide 63

@sarah_edo

Slide 64

Daniel @danielkuntz0 @sarah_edo

Slide 65

AR Expedition @sarah_edo

Slide 66

static 2d is an abstraction

Slide 67

Minh Pham on Dribbble @sarah_edo

Slide 68

@sarah_edo

Slide 69

@sarah_edo

Slide 70

How Virtual Reality Benefits Seniors Aditi Khazanchi @sarah_edo

Slide 71

seaheroquest.com @sarah_edo

Slide 72

The Art of Journey @sarah_edo

Slide 73

Hands-free experiences

Slide 74

Slide 75

@sarah_edo

Slide 76

@sarah_edo

Slide 77

@sarah_edo

Slide 78

@sarah_edo

Slide 79

@sarah_edo

Slide 80

SLOW DOWN @sarah_edo

Slide 81

BIOFEEDBACK

Slide 82

@sarah_edo

Slide 83

@sarah_edo

Slide 84

In store.js (Vuex) export default new Vuex.Store({ state: { counter: 0, intent: ‘None’, intensity: ‘None’, score: 0, // idle - awaiting user input // listening - listening to user input // fetching - fetching user data from the API uiState: ‘idle’, zoom: 3 }, getters: { intentStr: state => { var str = state.intent str = str.replace(/\b(App.)\b/gi, ”) return str }, @sarah_edo

Slide 85

In store.js (Vuex) actions: { getSpeech({ dispatch, commit, state }) { commit(‘setUiState’, ‘listening’) //keep recording speech all the time or activate it//for the first screen no, press a button. second screen yes. state.intent === ‘None’ ? (recognition.continuous = true) : (recognition.continuous = false) recognition.start() … }, recognition.onresult = function(event) { const last = event.results.length - 1 const phrase = event.results[last][0].transcript dispatch(‘getUnderstanding’, phrase) } @sarah_edo

Slide 86

In store.js (Vuex) getUnderstanding({ commit }, utterance) { commit(‘setUiState’, ‘fetching’) const url = https://westus.api.cognitive.microsoft.com/luis/v2.0/apps /4aba2274-c5df-4b0d-8ff7-57658254d042 https: axios({ method: ‘get’, url, params: { verbose: true, timezoneOffset: 0, q: utterance }, headers: { ‘Content-Type’: ‘application/json’, ‘Ocp-Apim-Subscription-Key’: ‘XXXXXXXXXXXXXXXXXXX’ } }) @sarah_edo

Slide 87

@sarah_edo

Slide 88

@sarah_edo

Slide 89

In store.js (Vuex) mutations: { newIntent: (state, {intent, score}) => { if (intent.includes(‘Intensity’)) { state.intensity = intent if (intent.includes(‘More’)) { state.counter++ } else if (intent.includes(‘Less’)) { state.counter-} } else { state.intent = intent } state.score = score }, … } @sarah_edo

Slide 90

In Base.vue (Components) createShapes() { this.bufferCamera.position.z = this.shapeZoom if (this.torusKnot !== null) { this.torusKnot.material.dispose() this.torusKnot.geometry.dispose() this.bufferScene.remove(this.torusKnot) } var shape = new THREE.TorusKnotGeometry( this.tConfig.a, this.tConfig.b, this.tConfig.c, this.tConfig.d ), material … this.torusKnot = new THREE.Mesh(shape, material) this.torusKnot.material.needsUpdate = true this.bufferScene.add(this.torusKnot) }, @sarah_edo

Slide 91

In Base.vue (Components) animate() { this.storeRAF = requestAnimationFrame(this.animate) this.bufferScene.rotation.x += 0.01 this.bufferScene.rotation.y += 0.02 this.renderer.render( this.bufferScene, this.bufferCamera, this.bufferTexture ) this.renderer.render(this.scene, this.camera) }, @sarah_edo

Slide 92

In Base.vue (Components) watch: { shapeZoom() { this.createShapes() cancelAnimationFrame(this.storeRAF) this.animate() } }, Repo: github.com/sdras/three-vue-pattern @sarah_edo