Let’s start by observing a minute of silence for every brand that’s still using a PDF. Before you jump to any conclusions, let us state that we don’t dislike PDFs but we just feel that they don’t work in this mobile first world.

Every B2B brands still continue to use them for developing marketing assets. The dichotomy is that the very brands that are promoting digital are the ones that still continue to use PDFs. The whole inbound model seems to be built on users downloading PDFs.

Enough of ranting let’s move to the topic now. We are the cusp of web evolution with the widespread of acceptance of HTML5 which allows us to experiment with new technologies like WebGL, HTML5 Canvas & an endless supply of Javascript libraries.

The existence of newer technologies means that both brands and publishers can experiment and continuously push the envelope when it comes to web development. Somehow brands don’t seem to have evolved beyond adopting responsive frameworks like BootStrap and Boilerplate.

Web Animation

Before we move into WebGL it’s important we talk about the existing plugins, tools, and libraries that developers can use to animate elements.

CSS3

CSS3 based animation can be handy when your site needs simple animation and transitions. CSS3 can also be used to animate DOM elements. In the case of CSS3 based animation, declarative animations are taken care of by the browser while GPU acceleration is needed for transformations and opacity.

CSS3 has the following tools, libraries & plugins:

  • move.js
  • animate.css
  • effeckt.css
  • animo.js
  • zepto.js
  • morf.js
  • slidr.js
  • clickstream.js
JavaScript Based Animation

A javascript-based animation is required for complex animation which could have animated sequences, independent transformations, canvas animation, progress reporting, time scale, call back function and animated paths. A javascript-based animation will require a GPU-based acceleration in matrix 3D transformations.

Javascript-based animation tools, plugins, and libraries currently available are:

  • GSAP.js
  • jagur.js
  • tween.js
  • Motio
WebGL

WebGL stands for Web Graphics Library and uses Javascript bases API to render 2D and 3D animation within any web browser without using any plugins. WebGL is today supported by most browsers.

WebGL has the following widely accepted libraries:

  • Three.JS
  • Processing.JS
  • Babylon.JS

Google has been an advocate of the technology has a dedicated site named ‘Chrome Experiments‘ to showcase what the technology can allow developers to do with it. Getting web animation right is not easy hence we recommend that you read ‘High-Performance Animation‘ if you are a developer who is responsible for the execution bit.

For marketers, the possibilities are limitless using WebGL. Brands across the world are playing with technology and creating experiences that redefine web experience for users. If your goal is engagement which boils down to user experience and time on site, then WebGL has to be on your list because it makes the complex sound easy.

Before we digress from the topic, let us show you the capabilities of the technology using some examples.

TV-aksjonen – Save the Rainforest

TV-aksjonen is an annual cause-related campaign organized by NRK Television in Norway. The campaign picks up one cause every year and generates donations using volunteers and digital modes of payment. In 2015 the brand had supported the cause of ‘Save the Rainforest.’

http://rainforest.arkivert.no/

Save the Rainforest website allows visitors to explore the rainforest through WebGL, immersive 360-degree panoramic images, and videos.

WebGL Syria Stories

The brand also created a similar campaign on the war in Syria named ‘Syria Stories.’ The underlying technology still is WebGL. The campaign uses real videos captured in Syria by citizens.

Jungle Book – The Law of the Jungle – http://thelawofthejungle.com

WebGL Jungle Book

The team at Jungle Book to create an immersive experience built 3D models of natural elements like tree, branches, flowers to recreate the feeling of entering a jungle. The site uses a dimensional transition between frames and has also implemented animation between section when the user drags the scene horizontally.

Kikk Festival – http://www.kikk.be/2016/

WebGL Kikk Festival

Kikk is an international festival held in Belgium every year. The theme for last year was interferences. The brand created a simple visible representation of light interference on the home page using WebGL, and they also added some extra layers of glitches that randomly appear over images when the users move to a new page.

WebGL has many use-cases, and you have to be open to experiment to find new uses cases. Do spend some reading about it and also check out more use-cases on the Three.JS website.