Smith

Smith Process is a physical & digital

Web Development UX Prototyping 3D modeling Interaction Design
fabrication studio located in Vallejo, California and rooted in systems-thinking.

SAY HELLO

Process Study: NEW / THINGS

The home screen for the Hello World Engineering site has a subtle, playful and explorative kick off to the user experience. In collaboration with site designer, Livia Foldes, I concepted the hover interaction, playing with the words, “NEW” and “THINGS”.  Simple and bold.

As I began to prototype several iterations of the interaction I quickly realized that to feel right, each word needed to have its own lifespan after being triggered into view. This meant individual JavaScript timers on each instance of each word after mouseenter… a very expensive calculation memory-wise. Even on our powerful machines, this was instantly apparent as the wrong way to solve the individual timing of each word.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.fade-word {
  opacity: 0;
}

.fade {
  opacity: 1;
  transition-property: opacity;
  transition-timing-function: ease;
  transition-duration: 0.2s;

  &.in {
    transition-delay: var(--timing-delay);
  }

  &.out {
    opacity: 0;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const fadeWords = _('.fade-word')
let fades = 0
let timer
let floor = 3
let ceil = 20

fadeWords.map(f => {
  f.addEventListener("mouseenter", () => {
    f
      .addClass('fade')
      .delay(10)
      .addClass('in')

    fades++
    
    timer = 
      fades <= ceil / 2 ? 
      (ceil / 2) + 1 : 
      Math.floor(Math.random() * ceil) + floor

    f
      .style({
        '--timing-delay': timer * ceil
      })
      .addClass('out')
      
    setTimeout(() => {
      fades--
    }, timer * ceil)
})

So, I turned to my favorite tool, CSS.

CSS is a powerful ally in web development, and can be used for so much more than simple styling of elements. When architected and combined with a little JavaScript, CSS becomes a powerful state machine that can totally transform any aspect of a website to pre-determined, or dynamic alternate states.

This came into play to help solve the memory issues for the HWE NEW/THINGS interaction by allowing me to write heavier CSS and lighter JavaScript. All animations, delays, and timers were accounted for in CSS classes, and all JavaScript had to do was be aware of those class options and simply randomly apply those to the word instances prior to user interaction.

Related

current: NEW / THINGS
next: UAI NYC