Datto.com Homepage

Animation: Sarah Talbot

Design: Mindtrust Labs

Datto 2018

See live on datto.com

Design Challenge: Create a lively, looping animation that introduces Datto as a creative, technology driven company. The animated video must be able to be responsive in a web page header, and blend with a transparent background.

Execution: Conceptually, I want the animation to tell the story of Datto constantly at work in all kinds of businesses, and most importantly, showing that the technology works both on site, and through an extensive private cloud. I pushed Datto’s creative and lighthearted personality through vignettes of a chase scene with a virus, springy movements on icons, and the idea that not just data, but entire buildings could be vacuumed up and stored in the cloud.

The greatest technical challenge for this video was to optimize the render so that the background could be transparent. Because the video could only be embedded as an .MP4 file, the video file itself could not support transparency. However, I collaborated with Datto’s Web Team to produce the effect of transparency by using a method that allowed the video render to contain both the final version, and a black and white alpha channel render which could be used to mask the video on the web. I designed the video at twice its height, duplicating the original, and converting the duplicate to show only the alpha channel. The final video file is actually the two versions stacked on top of each other, the top half the full color version, and the bottom half the alpha channel. When implemented on the website, only the top half of the video is visible, while the bottom half acts as a source for code which sets the transparency of each pixel in the embedded video.