PHP, Javascript & React

Building The Actors Theatre Humana Festival Mobile Site

By:

Josie Flynn

on 2/12/2015

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

Share to

Related Posts

Wordpress to Sanity Data Script

By:Nick Stewart on 3/11/2021

One of the biggest challenges of moving from one CMS to another is getting your existing data to the new platform. In our case, we were moving our existing WordPress platform, which had been around for years, over to the Sanity.io platform.

Read More »
Developing the New via.studio

By:Alec Robertson on 6/14/2021

A deep dive into creating a fast, user-focused experience on the latest web technology stack for the new via.studio website.

Read More »