Brief

Landing page for a product that puts emphasis on creativity

IDEO is a global design and consulting firm with offices across the world. They are proponents of using design thinking approach to design products, services, environments and digital experiences.

IDEO wanted to build an immersive landing page for their digital product creative difference that is responsive, fast, light weight and works smooth across different browsers.

Our challenge was to build this highly animated landing page and meet the performance goals of rendering it above 60 FPS.

Challenge

Building for scroll Interactions

Their highly customised landing page design required animations and rendering of new elements on the screen based on the vertial scroll position of the page. They also wanted to build it without any proprietary software and stick with web standards and specifications.

Solution

ScrollMagic and CSS3 transitions

ScrollMagic is an open source javascript library that provides constructs to trigger different actions at different scroll points. It is lightweight and optimised for performance. We implemented the complex interactions that the landing page demanded using ScrollMagic.

CSS3 transitions is expressive and highly performant way of animating the elements in the DOM that works well across different browsers. The key is to stick to the transition functions that are well adopted across different browsers. Our implementation took care of these concerns and successfully implemented all the interactions and experiences required by the design.

Demo