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:
I can put the Lottie url in a Web Viewer that’s hidden at screen start and then do this:
But it’s imperfect.
you could use the same block for the animation .
insted of web viewer, animation.
What happens if you set loop to true, wait 2.5 seconds, set loop to false combined with visible true/false?
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
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?
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.
2 Likes
This is also related to this topic:
I did find a workaround:
- Download the Lottie animation as a GIF.
- Upload the GIF to the Thunkable project.
- Add an Image component to the project and (optionally) a button.
- 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:
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:
4 Likes