Insights... 7UP

Written by DPDK on 9, Juth 2017

What did you want to accomplish with the project?

Making everyone thirsty for 7UP! This 7UP website is a designed as a refreshing brand experience, showcasing a small array of products with the largest possible impact. On a production level, we aimed to push innovation on animations and transitions, crafting a seamless experience. Every page transition has its own little animation, none of them are the same. In essence, we were looking at the website more from a storyboard perspective rather than using the old fashioned wireframe. The creative process involved in coming up with as many animations as we could, which was great fun.

What technical challenges did you encounter and how did you solve them?

We pushed hard to keep all the animation small and mobile friendly. All page transitions are first created to their maximum effect in After Effects and exported with Body movin’ to SVG. Also we had some performance challenges we needed to conquer. Without going into the nitty gritty, let’s just say those were optimized using GSAP. Most of the difficulties we encountered while reconstructing the layout, we could solve by using flex-box.

What did winning the FWA award mean to you?

A very nice recognition for achieving our goals, an enormous injection of drive into our team, and a client thirsty for more.

Tools used:

There are some CSS3, Canvas, SVG animations and transitions. For the animations within the pages, we used GSAP as well. 

Three hot facts:

  • To create the best effect in the twisting cap animation, the cap was first made in Cinema 4d, carefully traced, afterwards animated. 
  • When you press 7 on the keyboard or swipe left on mobile, the site menu appears. 
  • All sound design was carefully crafted and produced by our sound designer.  

... and we are still drinking 7UP every day till this day.

Digital Agency