Gif does not restart when open a new form

I’m using this GIF which is not looped. It’s “playing” only once.
It’s a spinning wheel and at the End a Text message.

Loading 1x

When I open a form first time it is playing the GIF once.
It pauses at the End, so the User only sees the Text message.

When I open the form again, the GIF will not start at the beginning, but will show only the end’s Text message.

So it seems as AppSheet thinks: “Oh I know this GIF, and I already played it till the end, so it would be boring to show it again” :joy:

But I would need it to start at the beginning.

Adding @tsuji_koichi the GIF expert :slight_smile:

1 Like

Do you want something like this?

1 Like

No I need the GIF you see in my first post. Not looping. Just playing one time.

I tried it also with SVG. Same thing. It will not start the SVG from the beginning.

This is the Browser Code for the SVG:

data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 150 150"><rect x="0" y="0" width="100%" height="100%" fill="%23FFFFFF" /><g><path d="M31.6 8.98a4.02 4.02 0 0 0 1.7 5.3l6.12 3.22a52.56 52.56 0 1 0 63.13 10.73L96 33.97a43.88 43.88 0 1 1-53-8.5l-3.65 7.4a4.02 4.02 0 0 0 1.72 5.3 3.73 3.73 0 0 0 5.13-1.67l7.66-15.63a4.18 4.18 0 0 0-1.75-5.4L36.74 7.32a3.73 3.73 0 0 0-5.13 1.66z" fill="%23000000" fill-opacity="1"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1800ms" repeatCount="indefinite"> </animateTransform></g> <rect width="100%" height="100%" fill="none"> <set attributeName="fill" to="white" begin="3s"/> </rect> <text x="50%" y="25%" fill="none" font-weight="bold" font-family="Roboto,Arial,sans-serif" font-size="28px" text-anchor="middle"> Foto <tspan x="50%" y="50%">nochmal</tspan> <tspan x="50%" y="75%">aufnehmen</tspan> <set attributeName="fill" to="red" begin="3s"/> </text> </svg>

This is the AppSheet Code for the SVG:

“data:image/svg+xml;utf8,<svg xmlns=""http://www.w3.org/2000/svg"" width=""100px"" height=""100px"" viewBox=""0 0 150 150"">

<rect x=""0"" y=""0"" width=""100%"" height=""100%"" fill=""%23FFFFFF"" /><g><path d=""M31.6 8.98a4.02 4.02 0 0 0 1.7 5.3l6.12 3.22a52.56 52.56 0 1 0 63.13 10.73L96 33.97a43.88 43.88 0 1 1-53-8.5l-3.65 7.4a4.02 4.02 0 0 0 1.72 5.3 3.73 3.73 0 0 0 5.13-1.67l7.66-15.63a4.18 4.18 0 0 0-1.75-5.4L36.74 7.32a3.73 3.73 0 0 0-5.13 1.66z"" fill=""%23000000"" fill-opacity=""1""/><animateTransform attributeName=""transform"" type=""rotate"" from=""0 64 64"" to=""360 64 64"" dur=""1800ms"" repeatCount=""indefinite"">
</animateTransform></g>

<rect width=""100%"" height=""100%"" fill=""none"">
<set attributeName=""fill"" to=""white"" begin=""3s""/>
</rect>

<text x=""50%"" y=""25%"" fill=""none"" font-weight=""bold"" font-family=""Roboto,Arial,sans-serif"" font-size=""28px"" text-anchor=""middle"">
Foto
<tspan x=""50%"" y=""50%"">nochmal</tspan>
<tspan x=""50%"" y=""75%"">aufnehmen</tspan>
<set attributeName=""fill"" to=""red"" begin=""3s""/>
</text>

</svg>”

Adding @Jonathon the SVG expert :slight_smile:

I can only speculate, but it sounds like the assets are loaded once and remain loaded until the browser or application is refreshed.

I wonder if it would be possible to reset or reinitialize the SVG animation by including a placeholder virtual column value? Perhaps a RANDOM() integer that doesn’t do anything to the SVG, but prevents AppSheet from caching the image? Here would be an example below:

... <rect id=""",[randomvalue],""" ...

If this works, it would effectively be tricking AppSheet into thinking its a new image every time the form is loaded. One possible concern is that, over time if the application is not refreshed, these images may begin to take up a lot of device memory.

2 Likes

@Jonathon you are awesome. Thank you so much.
You are absolutely right. I solved it with:

... <rect id=""",UNIQUEID(),""" ...

2 Likes