Hi all,
We are currently using lottie for both stand-alone animations and ‘scroll-controlled’ lotties (our own code, that skips back and forth in the ‘timeline’ as the user scrolls the page.
But we would love to be able to make the stand-alone animations interactive.
As it is now, we use the ‘dot-lottie’ player for .lottie files and the bodymovin player for the .json files.
If we want to add interactivity to one of those, how do we go about that?
By interactivity, I was hoping to do something like: click an element, and play frames 50-100 and click another and play frames 101-150, for example.
Is that possible, and how do we get started? Can both players do this…or none of them…?
Right now, we are producing lottie files with both AfterEffects and Keyshape. Do we need something else to be able to export files with interactivity, or can that be done with those tools?
You can accomplish your interactivity with a small amount of javascript code. You’d also need to add id names to your layers via AfterEffects to make them easily targetable in javascript.
First step would be to rename the elements you want to listen for click by changing their layer name:
Either using the LottieFiles editor which makes it simple to select a layer and change its id on the bottom right panel
In after-effects double click the layer and rename it to #[insert your layer name] - the ‘#’ is the important part
After that you can follow my code here which listens for onClick on two separate elements and plays different segments accordingly:
I’ve also tried it with .lottie, which introduces ‘shadowRoot’ in the DOM.
That works with javascript too, but for some reason, I can’t target elements inside ‘shadowRoot’ with css, if I want a ‘cursor:pointer’ for example.
But I can do that with javascript, so all good.
