# How can you start an animation from an event?

**URL:** <https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984>\
**Category:** Questions about Thunkable X\
**Tags:** animation\
**Created:** [October 14, 2021, 6:25am UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984 "2021-10-14T06:25:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 14, 2021, 6:25am UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984/1 "2021-10-14T06:25:06Z")

</div>

Is there any way to trigger an animation to start? For example, play a Lottie animation when a button is clicked?

These are the only options:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/2/92a3a0bce44f67b185a6d8a820164332f9912376.png)

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 14, 2021, 7:14am UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984/2 "2021-10-14T07:14:40Z")

</div>

I can put the Lottie url in a Web Viewer that’s hidden at screen start and then do this:

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/0/801ebf502db518fba78a153c162d1c913c998e09.png)

But it’s imperfect.

---

<div class="post-metadata">

**Author:** ![vishruth-ram](https://avatars.discourse-cdn.com/v4/letter/v/82dd89/32.png) [@vishruth-ram](https://community.thunkable.com/u/vishruth-ram)\
**Post date:** [October 14, 2021, 7:43am UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984/3 "2021-10-14T07:43:30Z")

</div>

you could use the same block for the animation .

> [@tatiang](#):
>
> that’s hidden at screen start and then do this:
> 
> ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/0/801ebf502db518fba78a153c162d1c913c998e09.png)

insted of web viewer, animation.

---

<div class="post-metadata">

**Author:** ![martint](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/martint/32/96689_2.png) [@martint](https://community.thunkable.com/u/martint)\
**Post date:** [October 14, 2021, 8:02am UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984/4 "2021-10-14T08:02:37Z")

</div>

What happens if you set loop to true, wait 2.5 seconds, set loop to false combined with visible true/false?

---

<div class="post-metadata">

**Author:** ![namitnagar](https://avatars.discourse-cdn.com/v4/letter/n/a183cd/32.png) [@namitnagar](https://community.thunkable.com/u/namitnagar)\
**Post date:** [October 14, 2021, 9:46am UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984/5 "2021-10-14T09:46:51Z")

</div>

What you can do is set image visible false upload the Lottie file and when button click set image visible true set image picture to Lottie file

---

<div class="post-metadata">

**Author:** ![martint](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/martint/32/96689_2.png) [@martint](https://community.thunkable.com/u/martint)\
**Post date:** [October 14, 2021, 10:07am UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984/6 "2021-10-14T10:07:28Z")

</div>

I think @tatiang is trying to make sure the animation runs once from start to finish? With Visible true/false alone the animation may run from half way through?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 14, 2021, 2:25pm UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984/7 "2021-10-14T14:25:01Z")

</div>

@vishruth-ram

Have you tried that? Because I already had and it doesn’t work. Please test your ideas before making suggestions. You’ve already been asked to do that in another topic.

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 15, 2021, 1:36am UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984/8 "2021-10-15T01:36:17Z")

</div>

This is also related to this topic:

> [@Animation activation](https://community.thunkable.com/t/animation-activation/1555733):
>
> When I push a botton I want to see an animation 1 time ( no loops ) ( from [lottiefiles.com](http://lottiefiles.com) ) It works only the first time, I push the botton and I see the animation but when the animation is finished I push again the botton it doesn’t work, the animation doesn’t run. I want to see the animation each time I push the botton. How can I fix this problem?

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [October 15, 2021, 5:18am UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984/9 "2021-10-15T05:18:16Z")

</div>

I did find a workaround:

1. Download the Lottie animation as a GIF.
2. Upload the GIF to the Thunkable project.
3. Add an Image component to the project and (optionally) a button.
4. Use this code to show the animation when a button is clicked (or choose a different event type) and to hide it after the animation is completed:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/4/049b288cbdf9858e8dfed6d801fceeadf43bbf39.png)

The wait block duration depends on the GIF duration. There doesn’t seem to be an indication of the duration on the Lottie website. But I downloaded the GIF and opened it to find out that it had 58 frames. Assuming 30 frames per second (fps), that works out to 58/30 = 1.93 seconds. But I don’t know if every Lottie is 30 fps so it might be best to just use trial and error to see if the wait is long enough to display the entire animation once.

**Edit:** this works great the first time I click the button but after that it’s unpredictable.

**Edit #2:** Fixed:

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/3/53023594b3064dc7175497c7ce541ce94bead6e8.png)

---

<div class="post-metadata">

**Author:** ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)\
**Post date:** [November 8, 2024, 1:14pm UTC](https://community.thunkable.com/t/how-can-you-start-an-animation-from-an-event/1560984/10 "2024-11-08T13:14:48Z")

</div>


