GIF animation only triggers on first load


I’m trying to build a virtual dice in adalo. I’ve made six animated GIFs, one for each possible outcome.

The goal
When a user clicks on the dice one of six GIFs should be presented.
Example of GIF correspoding to the number 1. Open the image in a new tab to view the animation:

The database has two properties:

  1. An integer from 1 to 6
  2. An animated GIF corresponding to the integer property

The problem
I’m able to randomize it using a (image)list which chooses a database entry based on a text input with a rand(1,6) function. This part works. But whenever one of those GIFs loads a second time, the GIF animation doesn’t trigger and is displayed as a static image. (Sometimes it actually does work :face_with_raised_eyebrow:, but this is inconsistent).

I’ve tried some workarounds such as page reloads. I’ve tried editing the database to delete and then create the current entry in the hopes it would reload the next time it’s triggered. I also tried alternatives such as lottieFiles, but the browser freezes when adding a Json file. Using a video is not preferred as it constantly has to load a file from an external url.

Does anyone have a solution or workaround for this problem?

Not experienced enough to give you a solution. I was going to suggest a json. Appears you already tried. Maybe Victor would know how. Or, perhaps getting a custom component built would be worth it / not too expensive.

Hi Toddy,

Thank you for the reply! I think I’ll look into the json solution and try to locate the problem with my browser freezing.

My assumption: this is happening because the gif has already loaded previously and completed it’s animation, so it’s showing a static image next time it shows up with visibility condition.

I suggest you replace this with lottiefiles instead of gif images.

Hi Bhanu,

That makes sense, thanks for your reply!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.