YEAR
2017
DELIVERABLE
- 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.