Lottie Web in Adobe Animate

Description

This was an exploratory project to test the feasibility of incorporating Lottie Web animations in an Adobe Animate canvas project.

Goals

Test overall feasibility of rendering Lottie-Web animation on Animate CC canvas.

Determine practicality of incorporating Lottie-Web in Animate CC. What additional overhead code will be required by designers? How will Lottie-Web animations be controlled alongside and interact with Animate CC canvas objects?

Create a working prototype.

Challenges

Finding a way to render Lottie-Web animations as if they were traditional Animate CC canvas objects, thus lowering the cost of entry for designers already familiar with working in Animate CC.

When Lottie-Web animations are rendered to a canvas, the Lottie-Web JS library controls drawing to, and refreshing the canvas.

Each Lottie-Web animation typically requires its own canvas for rendering.

Animate CC uses CreateJS, which also controls drawing to and refreshing the canvas.

Resolutions

Created a constructor function into which a designer passes a few required properties. One of these properties is a reference to an empty Animate CC stage object. Using the properties passed in, I load the Lottie-Web animation and inject it into the Animate CC stage object. The designer can then reposition, change alpha, visibility etc of the stage object in order to manipulate the position of the Lottie-Web animation on the Animate CC canvas. The designer can also control the playback of the Lottie-Web animation using some of the methods provided by the constructed object.

Tech

Adobe Animate
Lottie
EaselJS
JavaScript