The Lyftie Awards

Overview

With a tight deadline of two weeks, this project was designed, animated and built at lightning speed. I was given a lot of creative freedom on this project and was able to use techniques for interactive animations that I hadn't used in production environments yet. It's always a challenge and a delight to be asked to do something inventive.

Design

The entire plan for the site was to highlight the top markets popular destinations. Along with this landing page, there would be a sticker award that the destinations could proudly display. Although my badge designs were not actually used in the final round, I had fun exploring the directions we could go in. Below are a several of those designs.

The landing page layout was my own, although Danielle Diessner created the character illustrations and Matthew Law animated these characters to be placed in the page. I've always found that some of our best work as a creative team happens when we work collaboratively. 

Development

Creating a landing page like this in two weeks involved some quick-thinking and lots of coffee. Projects of this scope are changing constantly everyday, even up to launch. I had to integrate changes and requests from different parts of the company multiple times, every day, while making sure all pieces of the puzzle were coming together. 

Once I had the image sequences of each character, I compiled them into really long sprite images. I then used GreenSock to control the sprite animations and create the hover interaction.

The HTML markup used to load the sprite looked something like this: 

<div class="award-drinking">
    <img onmouseover="hoverDrinking()" onmouseout="drinkingEndLoop()" src="img/drinking.png" width="250" >
</div>

While the Javascript that actually made the animation happen used GreenSock's SteppedEase ease function:

function hoverDrinking() {
    drinking.repeat(-1),
    drinking.isActive() || drinking.restart()
}

function drinkingEndLoop() {
    drinking.repeat(1)
}

var drinking = TweenMax.to(".award-drinking img", 2, {
    y: -11750,
    ease: SteppedEase.config(47),
    onComplete: function() {
        this.restart(),
        this.pause()
    }
});

drinking.pause();

Motion

This project included a video collage to share on YouTube. I worked closely with Allen Danze, one of our video shooter and editors, to create a series of titles that would be spliced into his video. The video itself shows some of the work we did in 2015 as a creative team, but would have been hours if we showed everything.