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.
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.
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 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:
WebGL has the following widely accepted libraries:
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.’
Save the Rainforest website allows visitors to explore the rainforest through WebGL, immersive 360-degree panoramic images, and videos.
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
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/
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.