JSON Animations in ActivePresenter?


is it possible to use json file format in ActivePresenter for smaller illustrations? I want to have animated icons, which will only be animated when the user hovers over them. For the animated icons we use json files, which already include the animation itself. I was fiddling around with activepresenter but was not able to make the magic happen.

Best regards,

Hi Mel,

If the animated icon is independent from other ActivePresenter objects, you should embed it into a Web Object as mentioned in this thread Easy way to insert Lottie animation - #2 by Hang

Otherwise (e.g. in case you want to click the animated icon to show/hide another object), you should do the following steps to embed the animated icon directly into a shape:

  1. Add script to load Lottie library in Project > Properties > On Load event
     if (!window.bodymovin) {
         var lottieUrl = 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.11.0/lottie.min.js';
         var script = document.createElement("script");
         script.type = 'text/javascript';
         script.src = lottieUrl;
         prez.loadLottieAnimation = function(loadAnimFunc) {
             if (window.bodymovin)
                 script.addEventListener('load', loadAnimFunc, false);
  2. Add a shape to the slide, the lottie animation will be loaded into this shape in step 3. You can make this shape transparent by settings its fill color opacity to 0
  3. Add script to load Lottie animation in the slide On Load event
     // load Lottie animation into 'lottie' shape
     var jsonAnim = {}; // replace {} by your JSON animation data
     var animAPObject = prez.object('lottie'); // update the shape name
     prez.loadLottieAnimation(function() {
         var animLottieObject = bodymovin.loadAnimation({
             container: animAPObject.node,
             renderer: 'svg',
             loop: false,
             autoplay: false,
             animationData: jsonAnim // or path: path to JSON file
         // play animation on rollover/ rollout
         var direction = 1;
         animAPObject.on('ap-rollover', function() {
         animAPObject.on('ap-rollout', function() {

Sample project
Lottie.approj (300 KB)



Thanks again for your great help!

1 Like