in the Age of

Storytelling

JavaScript

• Why is storytelling important?
• Specific code examples (to get you going)
• Options for types of storytelling

As told by your biology

• We're rewarded for curiosity
• Story enables us to plan for the future
• We crave story

Journey on a

Website

Source

• Product: Get them to click on this x1000
• Design: Make it look 💯 *dribbble 4 eva
• Engineering: I'm learning *insert JS framework here*

Alignment & Communication

The "so what" factor

Performance

User

? Is this useful ?

? Is this capitivating ?

? Is it easy enough ?

Start with the end

Also helps track what validation looks like:

Google projects are encouraged to find ONE goal.

Fill in the space between

Aligns the entire team to the same goal

Reduces friction

source: Aaron Gustafson

Clarity

Clarity

Features

Personality

Personality

the good

Personality

the good

Personality

Learned behaviors

Tensorflow:

http://playground.tensorflow.org/

The good AND the bad

Personality

Loaders

• Reducing impact of perceived wait times through curiosity
• Humans over-estimate passive waits by 36% - Eli Fitch and Richard Larson, MIT
• Perceived wait times- people are willing to wait twice as long for a custom experience - Viget

Loaders

• Uncertain waits are longer than known, finite waits
• Disney world/Airports- entertainment while waiting
• Anxiety makes waits seem longer
• People want to get started- doctor exam rooms

Loaders

great case for SVG

Chris Gannon

Foreshadowing

or hints

From Functional UX Design Animations

Animating the viewBox

Timing

Timing

Consider how things look to your user

Shame the confirmshamers

Storytelling with Code

some options

Sets up a world beforehand,

so that it can be changed.

Surprise

This pen.

tl.call(addAttr);
tl.fromTo(feTurb, 1, {
  attr: {
    baseFrequency: '0 0'
  }
}, {
  attr: {
    baseFrequency: '0.8 1.2'
  },
  ease: Sine.easeOut
});
tl.to(feTurb, 1, {
  attr: {
    baseFrequency: '0 0'
  },
  ease: Sine.easeIn
});
tl.call(removeAttr);

Surprise with technique

SVG Filters

// filter attribute helpers
function addAttr() {
  feTurb.setAttribute('baseFrequency', '0 0');
}

function removeAttr() {
  var applyFilter = document.getElementById("applyFilter");
  applyFilter.removeAttribute("filter");
}

Surprise with technique

SVG Filters

End to end

Leo Leung

Without Transitions

Transitions

Encapsulate what is changing declaratively

Example with Vue

Vue's <transition> component

Sugar! Like in-out modes

Without in-out modes

<transition name="flip" mode="out-in">
  <slot v-if="!isShowing"></slot>
  <img v-else src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/cartoonvideo14.jpeg" />
</transition>

HTML

CSS

Geoff Graham:
On Writing Feature Requirements

End to end

Encapsulate what is changing - Vue

State-driven animation

Encapsulate what is changing- Vuex/Redux

export const store = new Vuex.Store({
  state: {
    showWeather: false,
    template: 0
  },
    mutations: {
      toggle: state => state.showWeather = !state.showWeather,
      updateTemplate: (state) => {
        state.showWeather = !state.showWeather;
        state.template = (state.template + 1) % 4;
      }
  }
});

State change can create the animation

Watchers/Observables/RxJS

David Khourshid:

An Animated Intro to RxJS

<div id="app" @mousemove="coordinates">

coordinates(e) {
  ...
  this.startArms.progress(1 - (e.clientX / walleCoords)).pause();
}

HTML (Vue Component)

JavaScript

Fixed Window

WebGL/Three.js

Fictional worlds engage emotion systems while disengaging action systems (just as dreams do)

Pottermore Patronus

User Interaction-Driven

so many options

overthetinyhills.com

Gain understanding

Spatial or otherwise

Codrops

Consistency

Motion Design Language

User Interaction-Driven

Make the user the character in the story

slaveryfootprint.org

Stories and empathy

User Interaction-Driven

Real-time data

fivethirtyeight

Scrollytelling

An Interactive Visualization of
Every Line in Hamilton

d3.js and React

Performance

Sustained

Curiosity

SVG Animations

Conclusion

But wait...

is there more?

The best way to make your site compelling is by actually making it compelling.

Thank you!