# Interactive lottiefiles

**URL:** <https://forum.lottiefiles.com/t/interactive-lottiefiles/4890>\
**Category:** Lottie Animation Design\
**Created:** [October 1, 2023, 7:44am UTC](https://forum.lottiefiles.com/t/interactive-lottiefiles/4890 "2023-10-01T07:44:33Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![maya1](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/maya1/32/3025_2.png) [@maya1](https://forum.lottiefiles.com/u/maya1)\
**Post date:** [October 1, 2023, 7:44am UTC](https://forum.lottiefiles.com/t/interactive-lottiefiles/4890/1 "2023-10-01T07:44:33Z")

</div>

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 😃

Thanks a lot

---

<div class="post-metadata">

**Author:** ![bhawk](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/bhawk/32/2926_2.png) [@bhawk](https://forum.lottiefiles.com/u/bhawk)\
**Post date:** [October 4, 2023, 4:51pm UTC](https://forum.lottiefiles.com/t/interactive-lottiefiles/4890/2 "2023-10-04T16:51:46Z")

</div>

Have you looked at the Lottie Interactivity documentation?

> **[Lottie Player - Interactivity Guide](https://lottiefiles.com/interactivity)**
>
> This is a quick demo for using the Lottie interactivity library with the Lottie Web Player component and the Lottie Player to add interactivity to your applications

---

<div class="post-metadata">

**Author:** ![maya1](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/maya1/32/3025_2.png) [@maya1](https://forum.lottiefiles.com/u/maya1)\
**Post date:** [October 5, 2023, 8:35am UTC](https://forum.lottiefiles.com/t/interactive-lottiefiles/4890/3 "2023-10-05T08:35:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![vijaypwr61](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/vijaypwr61/32/3122_2.png) [@vijaypwr61](https://forum.lottiefiles.com/u/vijaypwr61)\
**Post date:** [October 18, 2023, 10:13am UTC](https://forum.lottiefiles.com/t/interactive-lottiefiles/4890/4 "2023-10-18T10:13:45Z")

</div>

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](https://www.youtube.com/@SVGenius) 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.

---

<div class="post-metadata">

**Author:** ![bhawk](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/bhawk/32/2926_2.png) [@bhawk](https://forum.lottiefiles.com/u/bhawk)\
**Post date:** [October 19, 2023, 5:38pm UTC](https://forum.lottiefiles.com/t/interactive-lottiefiles/4890/5 "2023-10-19T17:38:05Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![vijaypwr61](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/vijaypwr61/32/3122_2.png) [@vijaypwr61](https://forum.lottiefiles.com/u/vijaypwr61)\
**Post date:** [October 20, 2023, 6:15am UTC](https://forum.lottiefiles.com/t/interactive-lottiefiles/4890/6 "2023-10-20T06:15:27Z")

</div>

Helping each other makes community strong. 😀 🙏

---

<div class="post-metadata">

**Author:** ![maya1](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/maya1/32/3025_2.png) [@maya1](https://forum.lottiefiles.com/u/maya1)\
**Post date:** [December 31, 2023, 2:05pm UTC](https://forum.lottiefiles.com/t/interactive-lottiefiles/4890/7 "2023-12-31T14:05:55Z")

</div>

Thank you so much!!! 😃

---

<div class="post-metadata">

**Author:** ![PFM](https://yyz2.discourse-cdn.com/flex030/user_avatar/forum.lottiefiles.com/pfm/32/3174_2.png) [@PFM](https://forum.lottiefiles.com/u/PFM)\
**Post date:** [January 10, 2024, 7:47am UTC](https://forum.lottiefiles.com/t/interactive-lottiefiles/4890/8 "2024-01-10T07:47:37Z")

</div>

> [@maya1](#):
>
> 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 [raiderlink](https://raiderlinkttu.us/) in code at all (not even JavaScript). I’m a simple motion graphics designer 😃
> 
> Thanks a lot

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