Interactive lottiefiles

Lottie Animation Design
1

Hi guys,
Can someone help me understand what I need to know in order to make my animations (in After Effects) interactive? Do I need to put an expression in my animation?
I have no experience in code at all (not even JavaScript). I’m a simple motion graphics designer :smiley:

Thanks a lot

2

Have you looked at the Lottie Interactivity documentation?

2 Likes
3

Yes thank you!
Are these expressions you put in After Effects? That’s the only thing I didn’t understand.
Thanks again

4

Hi, @maya1, the post referred by @bhawk is the official post by LottieFiles and the only page where you can understand Lottie interactivity easiest way, that’s the least code using JavaScript. How to create interactivity for LottieFiles animation, you can refer here this guy YouTube channel.

First understand you cannot create any interactivity using After Effect. For interactivity, not necessarily but you can consider following two things before exporting animation as lottiefile (.json) format.

  1. Add name to layer using symbol “#” in After Effect for more deep coding for interaction. Example: “#righthand”
    → What does this do? When, LottieFiles (.json) is rendered on webpage as SVG animation, the layers of the animation are rendered as part of the webpage as objects or graphic elements. These can be accessed and further manipulated by JavaScript (such as click, hover, scroll, in view etc). To access these elements, element ID must be given. And hence this is the way place you can give names. There is another hard way to give name, but that you don’t want it.

  2. Add markers to animation in After Effect for interactive animation.
    → This helps to play animation from certain or specific part or frames of the animation.

5

@vijaypwr61 Thank you for expounding on this subject. I was not aware that naming a layer in AfterEffects beginning with a # would indicate it as the element ID in the JSON file and hence refer to it in the javascript. I’ve learned something new!

6

Helping each other makes community strong. :grinning: :pray:

1 Like
7

Thank you so much!!! :smiley:

8

You should explore plugins like Bodymovin’ for interactive animations without code. Tutorials can guide non-coders through After Effects’ interactive features.

1 Like