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


Today, we are used to rich, animating websites on a desktop. Unfortunately, these experiences on mobile are still limited.


For 7UP, we did not want to exclude mobile users from this bubbly experience. For that reason, we searched for a lightweight solution for these transitions: full screen, fast loading, and small file size.  A challenge to be overcome.


We use 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.


The heritage page shows the old school bottles, with the signature bottle cap and we figured it would be fun to introduce the page with a pop. Because of the vector method, 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. Ending up with a beautiful, lightweight animation of a bottle cap, popping out of the screen as if in a 3D space.

Refreshing (end) result


We think that the transitions on 7UP are what gives that custom feel and work seamlessly with the vibrant design that each page already has. It was rewarding to create a unique set of animations between each page. 


We explored a lot within these transitions and at the end, the website really reflects that: each click brings something new and refreshing to the public.

view case