.. / Renault Designed For Life

Renault Designed For Life Clio 360 on iPad Mini


The Renault Designed For Life microsite is designed to showcase how great car design isn’t merely about looking good on the surface; it’s also about using its functionality to fit into your lifestyle. This microsite focuses on the Clio, ZOE and Captur and uses parallax scrolling techniques to take the user through the design journey for each model.

Parallax scrolling and scroll animations were implemented with Skrollr and enhanced with our custom-built plugin, Skrelpr to keep the HTML markup clean and basic, while centralizing all the scroll animations we setup for use with Skrollr.

To save on bandwidth, mobile users lose the animations (and all associated frames) but get an interactive 360-degree viewer built with reel. For desktop users lower-res frames are initially downloaded and rendered during scrolling. When the user stops scrolling, the hi-res equivalent of the current frame is downloaded and swapped, resulting in shorter load times and better animation performance. All asset versions are generated and served by Adobe Scene7 CDN.

Image sequences were generated in-house by Allandt, using a combination of After Effects and Flash to export individual frames. The falling petals, raindrop and shoes animations were created by Happy Finish. Front-end site build by Rich and QA by Przemek.


renault-transversal-clio-scroll-animated renault-transversal-clio-ipad-528x704 renault-transversal-clio-iphone5-230x409 renault-transversal-zoe-scroll-animated Renault Designed For Life parallax scrolling microsite renault-transversal-zoe-ipad2-528x704 renault-transversal-captur-scroll-animated renault-transversal-captur-iphone5-230x409 renault-transversal-captur-ipad-landscape-655x491
Posted in work and tagged , , , , .