Life Is a Blue Line.

Source of You

  • What We Did
    • SVG line drawing on scroll
    • Video components
    • Frame snapping
    • Gif sharing function
    • Unique reverse order scrolling
    • Mobile friendly
Visit Site

Source of You is a site conceived by the Nature Conservancy with sponsorship from Suntory. The organization is aimed at making sure water sources are safe and secure, with policy makers, industry, and environmental agencies among the people they work with to find solutions to water related issues. We teamed with Free Range to produce dazzling animation effects and intuitive scrolling work to help tell Source of You’s vital story.

First Section

Source of You begins at the bottom of the page and ends with a “footer” at the top of the page–a radical reinvention that turns the experience of reading a website on its head. We utilized a “snapping” mechanism to make sure each section filled the browser space, and took extra care to make it viewable on mobile screens.

Most striking is the blue line that snakes up the page–an animated SVG that kicks into place at the exact moment the viewer reaches the point where it begins. On the journey up there are giant modal overlays illustrating the work of participants in the project, complete with video clips and inspirational words emphasizing the importance of Source of You’s mission.

 

The Nature Conservancy helps safeguard our water sources through protection, restoration and collaboration. They work with policy makers, industry, environmental agencies, and others to find balanced solutions to the issues facing our water security.

Mapping Section

Of particular importance to the Source of You project is the mapping feature that scrolls into place just prior to the end of the site. Here, anyone interested in the mission can view the source of their community’s water and discover various facts about it, such as how close they are to a water source and the amount of sources that exist in their district.

The site integrates with a Mapbox plugin to relay the information, which is configured to work across devices on all platforms. After leaving the map section, the site ends with a series of animated gifs, which play on the water theme, and are shareable across various social media platforms.