Transitional Interfaces, Coded

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

Pasquale D’Silva’s article Transitional Interfaces has really been making the rounds. It’s a quick read that drives home a great point. Transitions and animations can be more than eye candy. They can help give your brain a clue about what is happening on a page.

If a list item is inserted into a list, rather than having it suddenly appear, an animation that moves the list to make room makes it extremely obvious what is going on. Otherwise it’s blink-and-you-miss-it.

The animated GIF’s in the article make it, so go check that out.

Pasquale wasn’t saying do exactly this every time! But they are nice examples so I figured I’d take a crack at making them happen on the web.

Check out the coded examples of transitional interfaces on CodePen.

Nothing groundbreaking, but a couple of tricks at play.

In the list-item-adding examples, the space is made in the list by at first setting the list items to max-height: 0; and having an @keyframes animation run on them which expands the max-height to 50. Careful there to make sure that number is high enough to cover the space with a reasonable enlargening of text.

The @keyframes only have a to { } block. When the from { } or 0% { } block is ommitted, it just starts the animated properties at whatever they are naturally. Height, opacity, and scale are all used here to make it pop into place.

.new-item {
  max-height: 0;
  opacity: 0;
  transform: scale(0);
  animation: growHeight 0.2s ease forwards;
}
@keyframes growHeight {
  to { 
    max-height: 50px;
    opacity: 1;
    transform: scale(1);
  }
}

In the slide-in example, first the space is created in the list, then the item is slide in to that space. That is done by using two different @keyframe animations. One to make the space, the other to do the slide. You can apply them both to a single element, spacing out the time in which they are run.

.new-item {
  max-height: 0;
  opacity: 0;
  transform: translateX(-300px);
  animation: 
    openSpace 0.2s ease forwards,
    moveIn 0.3s 0.2s ease forwards;
}
@keyframes openSpace {
  to { 
    max-height: 50px;
  }
}
@keyframes moveIn {
  to { 
    opacity: 1;
    transform: translateX(0);
  }
}

The second animation value has a second time parameter, which is the delay. The delay is the same as the duration of the first animation. So they run in sequence.

In the pop-up details view example, the list item is grown in size by using transform: scale(X); Behind it, the list is hidden from view by also using a scale transform. It makes itself much smaller and hides behind the expanded list item, which transforms many times the size of itself to compensate.