Animated 2013-14 Impact Report for Youth Without Shelter.
After falling in love with Faren Agency’s print design for the 2013-14 Impact Report, Youth Without Shelter came back with a request for a digital version – as quickly as possible.
The design remains pretty close to the printed brochure, though updated for browser strengths and adapted to a single page layout. The animation, however, was a big, new feature. Each page segment is set with JS-triggered CSS animation, timed to play out as the reader continues down the page.
With boundary-pushing CSS to accomplish the eclectic layout, responsive structuring was no small feat – but one always worth tackling.
For more on the design concept, check out the case study on Faren Agency's site.