Escentric

Generative animation for a perfume and fragrance brand

escentric-1.png

Escentric molecules is about niche perfume and fragrances. Their branding and products embrace this approach of art meeting science and visitors to the website are greeted by an animation that speaks to this message.

At Code on Canvas, we reimplemented this animation in code.

Approach

The animation is complex and was a challenge to tackle. I built an animation system in code for the project. We first decomposed the animation into a series of layers, groups and elements. Any layer can mask another layer behind itself. Elements with similar motion patterns were grouped.

escentric-layers.png

Timeline & Keyframe based animation

All elements are animated based on interpolation of parameters (position, size, and colour) between keyframes. To manage the complexity of the animation, it is also possible to group elements and interpolate between group keyframes. This method gives us easy and fine control the visibility and motion of elements in the scene. 

escentric-controls.png

To take advantage of this, I also developed a way to scrub through the animation in the browser and see exactly what is happening at any point in time.

High Performance

We use WebGL, with an option for Canvas fallback depending on browser capabilities. Objects are passed on to the renderer (Canvas or WebGL) for drawing. The renderer itself does not know what is being drawn.

Low footprint

Compared to the original video, the animation in code produced a 97% reduction in file size, making the website much faster to load.

escentric-size.png

Adaptive Performance

The animation changes in complexity based on the current frame rate. If performance starts to dip, the number of elements drawn on screen is reduced to maintain an acceptably smooth frame rate.

Generative

The parameters of the animation vary on each play through. No two visitors see the same thing.

Possibilities with animating in code

Screen Shot 2017-09-14 at 10.31.04 pm.png

The animation runs in a canvas element layered above the page. As the animation draws to a close, a transparent background starts revealing the website underneath for a neat aesthetic effect. Visitors can also easily skip to the end of the animation, and we leave them at the point just before the website is revealed.