Sparkling Ice Flavor Lab

2023 W3 Silver

General Websites - Food & Beverage

I was pulled into the Sparkling Ice Flavor Lab project near the end due to my experience with Vue. The tasks were clear: convert the static build into a responsive build and integrate some animations.

Responsiveness
Reworking some of the Vue components and overhauling the CSS associated with the application, ensured that the application is usable across all the devices. The challenge was to keep the selections readable while still holding the correct position on the bottle.

Animation
Would anyone be surprised to learn that I integrated GSAP library into the project? Well, bringing in this library, we were able to create minor animations throughout as well as the front page curtain pull. Inserting Vue references made GSAP a breeze.

gsap.to(phone.value, {
    rotation: '0deg',
    duration: 1,
    repeat: -1,
    repeatDelay: 2,
  });

VITE
Vite

VUE
Vue3

TW
Tailwind

GSAP
Greensocks

Project Details

Technology

GSAPHTMLJSSCSSTailwindViteVue3

Development Team

Nathaniel Hoyt

Frontend Developer

Steven Shepherd

Backend Developer

Darren West

QA Manager

Chris Jones

Backend Developer

Jeff Tidwell

Director of Technology

Chris Lopez

QA Engineer

Jimmy Lomax

Frontend Developer

Creative Team

Kiley Mabry

Associate Creative Director

Jaylynn Canales

Art Director