YEAR
2017
DELIVERABLE
- Illustrations
- Animations
- Web Design
- Story Design
- Web Development
Behind the scenes
Step #1
Drafting the story
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 #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.
A parallax animation experience
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.