Now Loading:
Team Bubbly

Team Bubbly

The icon that represents Brand Identity work for this portfolio piece. It's basically a pencil.The icon that represents Illustration work for this portfolio piece. It's basically a pen tool or a fountain pen.The icon that represents Illustration work for this portfolio piece. It's basically a pen tool or a fountain pen.
The first portfolio image for this portfolio piece.
Type
Web Development, UX, Animation, Design Consultation
Industry
Video Production
Fun
Lottie Animations, Video background on hover, Elementor
Second Image for this wonderful portfolio piece!The third portfolio image for this portfolio piece.

🙏🏻 The Needs

Team Bubbly hired us to implement a design and to come up with animations to spice up the website. I put this in our portfolio as the site came out fantastic and the animations were super challenging and fun. We were also hired to be design consultants for aspects that were not covered in the original design.

🎒The Challenges

One of the major challenges was that Team Bubbly will have heavy assets to show in their portfolio. This greatly affects load time. We had to come up with a strategy to serve up heavy assets while having the website load in a reasonable timeline.

🎨 Our Approach + Solutions

We first came up with animations that might be very cool and got approval from Team Bubbly. The idea was to come up with areas on the site where a user would hover over an element and bubbles would animate from the hover. This would only apply to the desktop breakpoint but makes for a very unique experience. We broke the animations into chunks around the elements on the site to have them scale easily. We also came up with videos starting to play in the background on hover and not loading the asset until hover. Super fun!

💣️ The Deliverables

We used Elementor to build the site, and After Effects to develop the animations as Lottie Files.

Bubble Animations
Hover to video animations
The fourth portfolio image for this portfolio piece.The fifth portfolio image for this portfolio piece.
The sixth portfolio image for this portfolio piece.