Grid Choreography | ✅ UX Animation Principles | @keyframers 1.23.2

grid-choreography-ux-animation-principles-keyframers-1-23-2.markdown

Grid Choreography | ✅ UX Animation Principles | @keyframers 1.23.2

Stephen Shaw, with some help from a disembodied David Khourshid, showcase more UX animation principles. Using Taras' wonderful guide as a reference, we turn the GIFs into code so you can see some practical implementations of these concepts. In this episode, we talk through the importance of acceleration/deceleration easing and choreography in animation across one and two axes.

• ⏰ Streamed live on October 1, 2018 at https://twitch.tv/keyframers
• 💡Inspiration: https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9
• 📺 Video: https://youtu.be/QcJwKqYhxPc
• 💻 Acceleration/Deceleration Demo: https://cdpn.io/pen/ZqbWao/
• 💻 Choreography Demo: https://cdpn.io/pen/yRYJPr/
• 💻 Grid Choreography Demo: https://cdpn.io/pen/bmVejm/

Skip around: 1:00 Animation overview 6:00 Start coding 1:00:00 Keyflections

Additional Resources:

• Splitting.js https://splitting.js.org

Like what we're doing? There are many ways you can support @keyframers so we can keep live coding awesome animations!

• Like & subscribe on YouTube at https://youtube.com/keyframers
• Follow & tweet us at https://twitter.com/keyframers.
• Join the live streams & subscribe on Twitch http://twitch.tv/keyframers
• Support us on Patreon at https://patreon.com/keyframers

Topics covered:

• Animation
• Staggering
• Choreography
• Easing
• Grid layout

A Pen by @keyframers on CodePen.

License.

index.html

<a href="https://youtu.be/QcJwKqYhxPc" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>

<div class="app" data-state="Good">  
  <div class="device">
    
    <ul class="dummy-list" data-splitting="grid">
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
    </ul>

  </div>
</div>

<div class="app" data-state="Bad">  
  <div class="device">
    
    <ul class="dummy-list" data-splitting="grid">
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
      <li class="dummy"></li>
    </ul>

  </div>
</div><!-- -->

script.js

Splitting({ target: '[data-splitting="grid"]' });


document.body.addEventListener('click', () => {
  // yes
  document.querySelectorAll('*').forEach(el => {
    el.style.animation = 'none';
    
    setTimeout(() => {
      el.style.animation = null;
    }, 0);
  })
})

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-1188/splitting-1.0.6.min.js"></script>

style.scss

$easing: cubic-bezier(.5, 0, .2, 1);

[data-state="Bad"] {
  --duration: 400ms;
  --delay: 120ms;
  --color: #FAE5E5;
  --darker-color: #D9A5A3;
  --faded-color: #{rgba(#EE9F9F, .5)};
}

[data-state="Good"] {
  --duration: 400ms;
  --delay: 220ms;
  --color: #E7EEF8;
  --darker-color: #6690D6;
  --faded-color: #{rgba(darken(#E7EEF8,20%), .5)};
}


.app {
  width: 100%;
  height: 100%;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: var(--color);
  
  &:before {
    font-family: monospace;
    content: attr(data-state); 
    margin-bottom: .5em;
  }
}

/* ---------------------------------- */


.device {
  width: 90%;
  max-width: 20rem;
  // height: 90vmin;
  // width: 40vmin;
  display: grid;

  border-radius: 1vmin;
  background-color: #fff;
  box-shadow: 0 2vmin 3vmin var(--faded-color);
  padding: 2vw;
  overflow: hidden;
}


/* ---------------------------------- */

.dummy-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1vw;
  grid-row-gap: 1vw;
}

.dummy {
  width: 100%;
  padding-top: 100%;
  background: var(--color);
}

.dummy {
  animation: enter .4s cubic-bezier(.5, 0, .5, 1) backwards;
  
  @keyframes enter {
    from {
      opacity: 0;
      transform: translateY(2rem) scale(0.6);
    }
  }
}

/* ---------------------------------- */


[data-state="Bad"] {
  @for $i from 1 through 15 {
    .dummy:nth-child(#{$i}) {
      animation-delay: calc(#{$i} * var(--delay));
    }
  }
}

[data-state="Good"] {
  .dummy {
    animation-delay: calc( 
      var(--col-index) * (var(--delay))
      + var(--row-index) * (var(--delay)/2) 
    ); 
  }
}
/* ---------------------------------- */

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body:before {

  pointer-events: none;
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.05;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ghost 10s ease-in-out infinite;
  z-index: 100000;
  // display: none;
  
  @keyframes ghost {
    from, to {
      transform: translateX(-25%) scale(2) skewX(-30deg);
    }
    50% {
      transform: translateX(25%) scale(2.2) skewX(30deg);
    }
  }
}

styles

<link href="https://unpkg.com/splitting/dist/splitting.css" rel="stylesheet" />