Can I add interactivity (JS / CSS) to affect elements within Bodymovin / Lottie animations?

Question

I'm an animator, not much of a coder but learning fast... I've been experimenting with the After Effects Bodymovin extension using bitmap images to make character animations I want to deploy on web and mobile.

The results are quite amazing, you can view my work in progress here: https://codepen.io/Hamsta/project/editor/XMKQzr

snapshot of animation

I want to add some simple interactivity - for now, just to be able to add a button which swaps the faces and jerseys of the characters with other ones stored on the server.

At the start of the JSON file (data.json), it seems that the bitmaps are all given id's of "image_0" to "image_24", for example :

[{"id":"image_0","w":60,"h":59,"u":"images/","p":"hand1_afl-players-combo.png"},{"id":"image_1","w":34,"h":96,"u":"images/","p":"forearm_afl-players-combo.png"},{"id":"image_2","w":88,"h":98,"u":"images/","p":"arm_afl-players-combo.png"},{"id":"image_3","w":102,"h":43,"u":"images/","p":"boot_afl-players-combo.png"},{"id":"image_4","w":19,"h":25,"u":"images/","p":"knee_afl-players-combo.png"},{"id":"image_5","w":49,"h":96,"u":"images/","p":"sock_royals_afl-players-combo.png"},{"id":"image_6","w":49,"h":111,"u":"images/","p":"calf_afl-players-combo.png"},{"id":"image_7","w":82,"h":84,"u":"images/","p":"shorts_royals_afl-players-combo.png"},{"id":"image_8","w":71,"h":127,"u":"images/","p":"thigh_afl-players-combo.png"},{"id":"image_9","w":350,"h":378,"u":"images/","p":"Screen_Shot_2018-06-15_at_3.17.03_pm.png"},{"id":"image_10","w":92,"h":106,"u":"images/","p":"bum_royals_afl-players-combo.png"},{"id":"image_11","w":87,"h":181,"u":"images/","p":"singlet_royals_afl-players-combo.png"},{"id":"image_12","w":61,"h":76,"u":"images/","p":"armpit_afl-players-combo.png"},{"id":"image_13","w":54,"h":81,"u":"images/","p":"neck_afl-players-combo.png"},{"id":"image_14","w":64,"h":67,"u":"images/","p":"left_hand1_afl-players-combo.png"},{"id":"image_15","w":150,"h":91,"u":"images/","p":"afl_ball.png"},{"id":"image_16","w":49,"h":96,"u":"images/","p":"sock_falcons_afl-players-combo.png"},{"id":"image_17","w":82,"h":84,"u":"images/","p":"shorts_falcons_afl-players-combo.png"},{"id":"image_18","w":352,"h":409,"u":"images/","p":"dave.png"},{"id":"image_19","w":517,"h":517,"u":"images/","p":"mark.png"},{"id":"image_20","w":92,"h":106,"u":"images/","p":"bum_falcons_afl-players-combo.png"},{"id":"image_21","w":87,"h":181,"u":"images/","p":"singlet_falcons_afl-players-combo.png"},{"id":"image_22","w":225,"h":225,"u":"images/","p":"grass__0-00-07-16_.png"},{"id":"image_23","w":1725,"h":100,"u":"images/","p":"sponsors1.png"},{"id":"image_24","w":1200,"h":674,"u":"images/","p":"stadium3.png"}

My question is - Can I target these id's in the JSON file with Javascript and CSS to swap the images? Or can I extract these ids and put them in a separate CSS file which I can then target? Is there a way to add even more interactivity to the animation, like control the direction of the character for example? Any help much appreciated!

HG

julio · Answer 1 · 2018-07-05T23:31:10.630

1

So I made some progress in my own project. I simply added "#" in front of a name for any shape layer or object in after effects. So if your object is named "image_0", try renaming it to "#image_0". It seems that it can then be recognized as an id name by javascript or CSS.

edited Jul 05 '18 at 23:31

answered Jul 05 '18 at 23:25

julio

43
5

Really? I was getting quotes for a week of work to make it happen. I have to try this out, thanks for the hint, Ill give it a shot tonight. – hamsta Jul 07 '18 at 00:07
Julio, I tried your hack but I couldnt seem to make it work. My javascript is pretty weak so I was trying to change the image using CSS. Do you have a link to a working project which utilises this trick? – hamsta Jul 14 '18 at 03:53

score 0 · Answer 2 · answered Dec 05 '18 at 12:59

Please, check the example ( svg renderer ):

var lottieAnimation = lottie.loadAnimation({
  container: document.getElementById('container'), // the dom element that will contain the animation
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // the path to the animation json
});

lottieAnimation.addEventListener('DOMLoaded', function(e) { 

    console.log('DOMLoaded fired'); 

    var el1 = lottieAnimation.renderer.elements[1];

    el1.baseElement.onclick = function(){

       console.log("Element name = '" + el1.data.nm + "' was clicked");
    }

    var el2 = lottieAnimation.renderer.elements[2];

    el2.baseElement.onclick = function(){

       console.log("Element name = '" + el2.data.nm + "' was clicked");
    }

});

Can I add interactivity (JS / CSS) to affect elements within Bodymovin / Lottie animations?

2 Answers2