Animation Builder Origin

In 2012, while serving as the Director of Interactive at Digital Surgeons, a project was undertaken for Lego to develop a custom poster builder. This digital tool was envisioned to showcase its functionality through an introductory sequence, illustrating the process of layer selection, transformation through rotation, and repositioning, along with the addition of background elements. To visually demonstrate these capabilities, our designer created several mockup frames.

The project demanded a method to animate these frames in a manner that was both highly efficient and lightweight, with a specific emphasis on minimal file size. To meet this requirement, I developed "Animation Builder," a library based on ActionScript 3. This library, when integrated with symbols from Adobe Animate, monitors their transformation matrices. It then dynamically generates corresponding CSS keyframes based on the symbol's keyframe positions within the timeline, allowing for the export of precise CSS keyframes percentages.

The Animation Builder tool proved to be an invaluable asset, enabling the creation of complex character animations that appeared to be intricately designed solely using CSS and SVG. This approach was not only performance-oriented but also significantly reduced the overall digital footprint of the animations, aligning perfectly with the project's specifications.