Datto Year In Review 2019

Datto Year in Review 2019

Bodymovin Animation and Interaction Coding: Sarah Talbot

Art Direction and Illustration: Pippa Bradbury

Web Development: Caitlin Gleason

I collaborated with our in-house web development team to create two intereactive elements using Bodymovin and Lottie. Although we implemented other forms of SVG animation throughout the site, we chose Bodymovin as the best engine for creating two highly complex scenes, one involving character animation, and the other involving a large number of vectors to be controlled by one element.

The rendered animations of the original interactive elements are below.

Point and Click Easter Egg

Users could aim the woman’s arms and phone with their mouse movement. On a click, the woman would take a photo…and the picture would shred in the frame.

Sunset Driven by Mouse Movement

As users dragged their mouse up and down the page, the sun would rise and set. You are the master of time!