IDEA

We needed to produce a working prototype that demo the functionality of an app that was proposed for Surf. The app needed to show floating bubbles that could be popped by the user when they touched them. This would in turn show unique pieces of content like videos and audio clips.

CHALLENGES

To produce a demo that could be shown on desktop, mobile phones and tablets and also show video on a mobile and audio. Without actually producing a full blown app.

SOLUTION

I created a web based demo using HTML5, CSS and GSAP and simulated the video by placing small GIF animations rather than using video. As the video would not play on mobile phones as an overlay, without creating a full app.

TECHNOLOGIES USED

HTML5, CSS3, Javascript, GSAP, AfterFX

RESULT

A working version on the final app is available to view on the link below. However the functionality to pop the bubbles can only be seen on devices that support a touch interface.

CLICK HERE to view live version of this project