7UP | A refreshing take on animation

Storytelling

The overall design of the website 7UP is vibrant since each page has its theme. We made sure that the transitions matched these topics. They show a lot of bubbles, bursts and popping fruit. At some point, the focus was more on the storytelling than just making different animations: What will we show next? The unique set we created covers every transition between each page: you won’t find the same animation twice!

Lightweight transitions

Nowadays we are used to rich, animating websites on our desktops. Unfortunately, these experiences on mobile are still limited. When we designed for 7UP, we did not want to exclude mobile users from this bubbly experience. We were therefore looking for a lightweight solution for these transitions: full screen, fast loading, and small file size. We overcame that challenge by using a particular technique, where every transition translates the animation into a text file. It downloads very fast and works seamlessly on each platform.

The flipping cap

For the heritage page, we had something special in mind. It showcases old school bottles with a signature bottle cap and we figured it would be fun to introduce the page with a pop. Because we used vectors, we restricted ourselves in some areas; one of them is the lack of 3D effects. Still, that did not stop us.

We vector traced a bottle cap flip animation, made with 3D software and we ended up with a beautiful, lightweight animation of a bottle cap, popping out of the screen as if in a 3D space.

Refreshing (end) result

The transitions on 7UP are what gives that custom feel we were aiming for, and work seamlessly with the vibrant design that is already present on each page. It was rewarding to create a unique set of animations between each page. The website really reflects out exploration within these transitions: each click brings something new and refreshing to the public.