Animated in-browser version of the charity's annual report for 2014.
After building a scrolling animated version of Plan Canada’s 2013 Annual Review, the charity was looking for a user-controlled version of the report for 2014. With CSS-based carousel animation and carefully timed slide transitions – as well as an available static version – the report was a success.
This is one of the few projects that isn’t responsive, as the charity’s site is built within a fixed state.
In the Wild - The carousel lives as an iframe within the charity's existing CMS platform, allowing for custom (up-to-date) JS and CSS styling / animation.
Slide Transitions - Images scale, dissolve, rotate, and shift on the X / Y axis while text fades and slides into place. All of the transition animation is built with CSS.
Alternate Transitions - Large background patterns slide up and down into place, while text elements shift and fade. Again, all animation is accomplished with CSS.
Static Version - A static version was also made available, if the carousel animation is distracting or a user wishes to read every slide at once. With the iframe embedding, the static version scrolls in its fixed element.