How can I add interactivity to my animation?

For a simpler start to adding interactivity to your animations, just click on the 'Interactivity' button beneath the animation and it will take you to a page with some basic options for your selected animation.

For the intermediates out there this is what you can do: 

You can target different values in a Lottie during runtime and use "KeyPaths" to access rotation/scale/values of a layer and object.

KeyPath values can be changed in real-time during playback by registering callbacks in combination with the Lottie-API library.

During building an animation you can name the layers/objects with the following convention so that it can be targeted like any normal HTML element when using the SVG renderer: prefix with # to give it an HTML ID, prefix with "." to give it a class name. For eg: Giving a layer the name "#person" would allow you to find and manipulate and add interactivity at runtime.

Let us point to some demos we've put together on how you can manipulate Lottie JSON in real time:

https://codesandbox.io/s/dynamic-text-with-lottie-animations-i42he
https://codesandbox.io/s/lottie-animation-real-time-pose-mapping-ufrfe?file=/index.html
https://codesandbox.io/s/lottie-control-rotationvalue-mousemove-8g5oj?file=/src/index.js
https://codesandbox.io/s/lottie-accelerometer-based-layer-translation-cdfk7

Hopefully this gets you started.