Hey there! You're using an out-of-date browser, so this site probably looks pretty funny. Upgrade your browser for the full experience.
benjamin button online

To demonstrate the power and flexibility of a headless WordPress install, our design and development teams worked side by side to create an interactive reading experience. The Curious Case of Benjamin Button, a short story by F. Scott Fitzgerald, let us have some fun with illustrations and animation.

Creating the framework

WordPress is a powerful content management system, which is why we use it on a majority of our websites. However, using WordPress to serve up the front-end of a site can make it difficult to do things like page transitions and super-speedy navigation. Now that WordPress has a built in API, we aren’t as limited as we used to be. We decided to build the site as a single-page application with WordPress as a back-end and React.js as our front-end JavaScript framework. WordPress doesn’t render the pages itself, but instead serves up content via the new API through a mixture of standard and customized JSON REST endpoints.

Morphing animation

Another large piece of the project was the reverse aging animation of Benjamin Button.  This was accomplished by using the Green Sock JavaScript animation platform.  Our design team created a series of SVG illustrations that represented the age of Benjamin in each chapter of the book. Every animated component (facial features, hat, etc) is in it’s own SVG path element; Green Sock allowed us to morph the shape of these paths to the corresponding path in the next illustration. Here’s a quick demo of how this works:

morphBenjamin(fastfoward) {
  let tag = 'chapter' + this.props.params.index;

  if (fastfoward) {
    this.morph.timeScale(10).tweenTo(tag, { onComplete: () => this.morph.timeScale(1) });
  } else {
    this.morph.tweenTo(tag);
  }
}

 

Once we had the content and framework, we created a library of custom illustrations to be used throughout the story. CSS keyframe animations give some movement to the homepage.

 

Telling the Story

To stay true to the original, we decided to emulate the experience of reading a physical book. We used gradients, texture, and animation to communicate the old-school experience.

Benjamin ages backwards in the story, so we also incorporated a ‘backwards’ metaphor throughout, such as a backwards ticking clock in the chapter archive and the button hover states.

 

 

How We Work Together

 

Born and raised in
Louisville, Kentucky.

502.498.8470

223 S. Clay St

Work With Us

  • This field is for validation purposes and should be left unchanged.