1K Club Landing Page

Overview

When a driver for Lyft hits 1000 rides, they are invited to join the 1K Club. This project involved creating a responsive landing page with an animated background header, animated scrolling elements, and supporting Meghan Newell in the design. My development work was supported by Zach Cole, who created the form validation effects.

Development

When I built this site I used my own plugin, Scrolleo, that I developed to tell exactly where the animated element is on the page was and to create the eased animation you see as you scroll up and down. This effect works on desktop, tablet, and mobile devices. To see the effect for yourself, I encourage you to go to the live site and look for the animated elements below:

The effect is achieved using an image sequence of renders from Cinema 4D that Meghan Newell provided to me. I stitched them together into one long sprite image, create multiple versions for different size screens, and used my plugin Scrolleo to tell Greensock to play an animation using thte Stepped Ease function.  The acceleration and easing effect you see when you stop scrolling is created by Scrolleo.

Motion

This project involved an animated background header that loops infinitely. I had a lot of fun creating this subtle drawing animation with a rotating camera movement.