July 30, 2019 | Day 2 – Session 2

Head of developer experience at Netlify, is a core member of the Vue JS team and a staff writer at CSS Tricks.

This is a special An Event Apart for me – a lot of people ask her if she’s self-taught. She doesn’t have a degree but she was taught on-the-job by someone

Today we’re going to push the boundaries of what’s possible on the web.

The web is first and foremost about communicating. We can communicate happiness, our fears, educate, but ultimately when you break everything down what we as humans are trying to do on the web is communicating.

So why would we need to think about animation to communicate?

Think about your first sensory memories. Media made you feel one of these things – Happiness, Fear, Curiosity, Sadness. Or maybe all of them! Emotion is attached to the limbic system.

Cartoons we saw when we were kids gave color and shape to our animations – they gave life to our internal worlds. We may not remember what happened to us when we were 5 but we may remember all the words to Hakuna Matata.

She’s there to talk about the web’s bright future.

PAGE TRANSITIONS
To create beautiful page experience we’re going to use a tool called NUXT.
There is something called a transition component in Vue. It’s a way to set animations

Her favorite things are JS Hooks for animation logic because you don’t have to write a lot of animation logic. There are some things that are really great for CSS and some things that are really great for JS.

With JS you’re not limited to 2 bezier handles. Green Sock is a tool that’s good for creating really styling transitions. You can also have different page transitions per page just by adding it

repo:
https://github.com/sdras/

The web has come under critique in recent years for being behind the experiences you can have on iOS and Android devices. We are allowed on iOS and android experiences to have seamless experiences when we’re going in between and interacting with apps.

One of the big things here is when you’re scanning a page you have to redo all of that logic.
Each time you see new content you have to rescan the content / remap the space and it can create cognitive gaps. So have can we reduce this cognitive load we put on our users?

An example of how to reduce cognitive leaks of how we could move the knobs for a stove from the front to the side where their configuration completely matches the position of the burners. That way the user always know which knob goes to which burner.

vuex store is like the application brain
We’re going to store what page we’re on and we’re able to update what page we’re on. We’re allowed to tell all components what page we’re on.

So we go into middleware and say ok when the root page changes let me know. Then we register the middleware in NUXT so it knows it’s there.

And then in layouts/default.vue there’s a basic layout you use for all NUXT applications. If you want something to stay on every page you just add it in the template element.

the transition-group component allows flip to happen under the hood. You wrap everything in this transition-group element and then all elements in it are able to have this flip technique applied.

Then you can add some styles that say ‘start here, end here and apply the animation.’

demo on this: page-transitions.com

If you’re not using a framework you can use a tool called Animate CSS Grid.

So those were some great ways to create seamless page transitions and those were responsive.

Responsive has been around a while. So what if our websites weren’t just responsive in 2D but in 3D as well.

What if the browser gave us some basic specs to create a 3D experience with ease?

On the page itself, capture the position of the mouse, update transforms, create some sphere buffer geometry (create a circle and apply a scene inside the circle) and then we put ’the camera’

If we have a div and want to make it round we add a border-radius. But what if we could apply a property called material and apply a value of ‘grass’?

What if we had CSS filters for 3D experiences?

An idea of a use-case would be to allow users to pop into a hotel room and get a 3D view of that hotel room before you book it. You’re basically just changing out the background image each time

supermedium.com
supermedium.com/supercraft

What if we could do something similar with Augmented Reality?
What if the browser let us extend what the user was seeing and what was contained within it using basic specs?

Example: We could teach chemistry by seeing how things combine and how the elements look! These ideas help reduce the cognitive load extremely or completely!

The Smithsonian worked so you can see the entire inside of the lunar landing vehicle. It allows people to have a human experience with this.

AR Expedition is important!
Spacial awareness is important – how big things are in relation to us. We live in a world that’s 3D, we live in a word that’s in motion.

Static 2D is an abstraction.
Without seeing things in 3D we’re creating cognitive leaks – we’re creating friction to understanding how things relate to our reality.

VR can benefit seniors as well.

Seaheroquest.com is a game that seniors can play and help us identify early onset dementia. If you have something like a game you can get that to so many more people than if you bring people in for a study and you can get so much more ad more accurate data.

She’s very excited to see what experiences and technology like this can do for advancements in the medical field.

What if some of our books and experiences could become a little more interactive and playful, and we could become more a part of the story?

What if it wasn’t limited to interaction but also progressive enhancement in book form. If you don’t have an iPad or an AR experience, you can see additive AR experience where things in the book are animating around.

What if learning was so engaging you never wanted it to end?
@AysSomething — follow her

In old cell animation, we broke pieces of an animation down into smaller bits and used them to create things like depth.

When we have these experiences we can have many different layers stacked onto of each other, and movies in the past used these exact same techniques to create cartoons via a multi-plane camera! This was in the 50s and we’re still not there on the web.

There are basic rules for these planes and fields of view.
1. You need a horizon or you’ll make people sick
2. You can have a front, back and sides to create a field of view wrapping around the ‘camera’

If you just put a widget in the space it doesn’t really work, it becomes a bit warped. Instead we have to think of the field of view and accommodate for that warping. So you have to fold widgets along the fields of view / grids.

You set up the field of view first with grids, barriers, and constraints, and then you can place things inside that grid and follow the grid.

Hands-Free Experience ideas
What if we break free of even the input methods of the past? What if we’re not in a realm where we’re even taking in mouse clicks and keyboard online?

Cool discussion about biofeedback and its importance to human health and things like medical recovery..

Very interesting demo on the video of showing someone some experience on the screen based on how they feel.

Luis is a language understanding application you can use / call out to for speech recognition. https://www.luis.ai/home

Then you can hook it up to an emotive headset that reads brainwaves and voice inputs

Why are we still making sites like we have static table-based layouts when we have

How are people going to remember your experience on the web if they feel nothing when they visit it??

Anything is possible – what are you gonna build? How can you in your everyday development life push the boundaries of what is possible? How can you create your dreams out of code and share them on the web?

That’s the purpose of the web – to build, share, and communicate.