Building The Actors Theatre Humana Festival Mobile Site

Every year, the Actors Theatre of Louisville presents the Humana Festival of New American Plays, consisting of 7 shows all running concurrently for 3 weeks. Many attendees are in from out of town and only have access to their mobile devices, so mobile traffic tends to increase.

The Actors Theatre mobile layout makes it as easy as possible for someone to purchase tickets for what’s playing today. Two shows are displayed side by side on the mobile site, with a left-right swipe revealing the second show on smaller displays. To make it easier for attendees to plan their visits, we needed to display all 7 shows regardless of whether or not they’re on stage today. Swiping through all of those shows was a bit of a chore and the majority of the festival’s lineup gets hidden off screen.

Our Solution

Closed

Open

To keep the entire festival lineup visible on screen, we condensed each show into a “card” containing its title, artwork, and links to information & ticket sales. We blend some of each show’s artwork through and pair each title with an icon to differentiate each card in the stack. Similar to the iOS Passbook app, tapping on a show card pulls it out of the stack, shuffling the rest to the bottom. Tapping the show title or the rest of the show stack slides your selected show back into the deck.

In motion

Building your own card stack

Pulling off this effect involved a bit of CSS and a little JavaScript to set up our click events. For the sake of this article, we’re going to simplify things a bit and just focus on applying this sliding card interaction to a styled list. This tutorial assumes a basic familiarity with LESS. We’re going to set up a few mixins in order to easily share code throughout our stylesheets.

First, let’s mark up our cards and get them looking nice.

These examples exclude any vendor-prefixed CSS properties. You’ll need to add them to any transition, transform, or backface-visibility declarations in this example.

HTML

LESS

This outputs four different colored cards, each stacked on top of each other with only the top-most visible. We could have offset each card individually with CSS, but we chose to take advantage of LESS’ looping functionality and some math to generate those styles. This way we were free to tinker with the offset without having to do the math ourselves each time.

Setting up our card positioning loop

Applying it to the .card class

Finally, we wrote some JavaScript to hook up our click event and toggle each card open/closed. We used the open and closed classes to track the state of the current card, toggling it and the rest of the stack as necessary.

Our cards are now animating in and out when clicked or tapped! You can adjust the speed and easing of the animation by changing the transition declaration on .card. We’ve only set each card’s header to be clickable so users can interact with content, but you can make the entire card clickable by changing

$('.card h3').on('click', function() { var card = $(this).closest('.card');

to

$('.card').on('click', function() { var card = $(this);

You can view and tinker with the full code for this tutorial here:

See the Pen Djruw by Joe Flynn (@joeflynn) on CodePen.10158