See The Unseen.
Tipping Point: Annual Report
Category: Uncategorized
- What We Did
- Unique scrolling effects
- Storytelling through fading animation
- Scrollmagic integration
- Parallax effects
- Fully responsive
- Striking design
- Lightweight load times
This one-page 2016 annual report for the Bay Area based non-profit Tipping Point is one of our most ambitious projects to date. The magic all derives from a series of background image fades, which combine to deliver a compelling summation of Tipping Point’s crucial work. The site was constructed in partnership with the design firm Free Range.
Time Section
Tipping Point’s annual report begins with a portion of introductory text, which gives way to the first, employment focussed section. Here, the main left-side nav fades in, while a series of overlaid images dissolve in and out of one another depending on which direction the user scrolls in. The section is ‘pinned’ to the page for the duration of the scene, which culminates in a bleached out effect that indicates the end of this particular ‘story’.
We achieved the effect partly by using the Scrollmagic plugin (for the ‘pinning’ motion) while also utilizing CSS transforms, images with varying z-index values, and a whole bag of other tricks that we don’t have time or space to explain here! Most important was to keep everything lightweight, so the page loads quickly and the animation always runs smoothly.
In the Bay Area, 1 in 10 families lives on $24,300 a year or less. But poverty is more than a matter of dollars and cents. For those in need, the effects of poverty—added stress or lack of time and resources—can be near impossible to detect at first glance.
Impact Section
The ‘Impact’ section of the site functions like most of the others–the pinning motion, the scrolling background effects–and adds a Javascript created countdown clock that indicates exactly how many people Tipping Point’s grantees have helped out of poverty.
It’s an effective exit point from the pinned portion of the site, ending with a sun-up effect that takes the user into sections on the foundation’s approach and a vast thank you list of their 2016 donors. The ‘Impact’ section also directly ties together the overriding themes of the site–education, employment, housing, and family wellness–in one neat bundle.
