Parallax Animation Landing

Project

For Treehouse, Commonlife’s co-living condominium, we aimed to drum up interest in the project before pre-sale efforts officially started. I was tasked to create a story narrative about the building that highlights its unique community amenities and spaces. As a result, I designed and developed a scrollable landing page that tells an animated story using parallax effects.

  • Design
  • Brand, story boarding, web design, animation, illustration, web development
  • Software
  • Adobe Photoshop
  • WordPress
  • HTML, CSS, PHP

Process

Behind the scenes

This project is to create a scrollable story experience for the Treehouse building project’s future tenants. The completed parallax landing webpage was marketed for a limited time to boost interest for the showrooms. The story features the mascot 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 1

Drafting the story

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.

Screencapture

Parallax Animation

The landing webpage was part of the pre-sale marketing campaign for Treehouse co-living building. Treehouse finished construction end of 2018, so the pre-sale websites are no longer online. However you can experience the scrolling story through this recorded capture of the website.