Innovative site for forward thinking Norwegian design and motion graphics agency. In collaboration with Flip’s in-house designer, I leveraged new and experimental browser features to develop a unique and quirky online presence for this exciting digital brand.

Flip’s in-house designer Ole Ødegaard had shown me a concept for the front page in which elements were masked and unmasked as the user moved their mouse pointer / scrolled. This movement would cause the grid of portfolio items to reveal illustrated counterparts. This can be seen in the video above.

I wrote a script to achieve what Ole wanted and was happy to find a solution that worked for touch devices too; on these, the mask is fixed in place and the effect can be seen as the user scrolls.

Nothing is hard-coded, meaning that the items featured on the front page can still be altered by the Flip staff. When they create content for the front page, they can upload graphics for both the front and back layers (masked and unmasked).

Front page aside, I worked with the Vimeo API to produce dynamic poster shots for embedded videos on portfolio pages. To aid content creation, I supplied a means of creating content using a visual editor as well as multiple layout templates to work from as a base.

Flip.no Masked Front Page Using CSS

HTML5 / Javascript / jQuery / PHP / SCSS / WordPress