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.
Parallax Animation Landing
![](https://i0.wp.com/www.shirley.works/wp-content/uploads/2018/11/plants1_watermk1.gif?fit=700%2C724)
Project
- Design
- Brand, story boarding, web design, animation, illustration, web development
- Software
- Adobe Photoshop
- WordPress
- HTML, CSS, PHP
- Client
- Kolon
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
![](https://i0.wp.com/www.shirley.works/wp-content/uploads/2018/12/storyboard_draft1.jpg?fit=1314%2C344)
![](https://i0.wp.com/www.shirley.works/wp-content/uploads/2018/12/scene3_parts.jpg?fit=800%2C738)
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.
![](https://i0.wp.com/www.shirley.works/wp-content/uploads/2018/12/mainmk_walking2.gif?fit=621%2C600)
![](https://i0.wp.com/www.shirley.works/wp-content/uploads/2018/12/scene3.gif?fit=565%2C400)
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.