• The Treehouse Story


  • Illustrations
  • Animations
  • Web Design
  • Story Design
  • Web Development

A parallax animation experience

As part of the marketing campaign for Treehouse, I was tasked to create an eye-catching landing page to generate attention. It was an opportunity to incorporate my designs and illustrations from throughout the project into the website – bringing vibrancy and character of the future tenants.

Behind the scenes

Step #1

Drafting the story

The story features the signature Meerkat character as it goes through daily life in Treehouse residence. I planned it out in 8 scenes, each highlighting a different quality of life at Treehouse. The audience controls the progression of the story by scrolling down the page, thus shifting the positions of the images and creating a parallax animation.

Step #2

Planning the scene

In order for the user to control the movement with scrolling, each element of each scene needs to be isolated. From foreground to background, the order of each component is planned to make sure the end result is cohesive and smooth.

Step #3

Animate each element

To really bring the scenes to life, I decided to animate each illustration, giving it a whimsical doodle-like appearance.

Step #4

Put it together

By controlling the opacity and position of each image, I can create a lively scene with a sense of depth. As the user scrolls down the page, each image moves across the website at different speeds – and so the story plays out as parallax animation.