Use GIF in kodular app (without extension)

Guides Resources
#1

I was searching how to use animated GIFs in my app this morning.

OBSERVATIONS
It seems that “Picture” component doesn’t handle GIFs (even if they display correctly in creator.kodular.io)
It seems that support for GIFs has been added a few years ago then removed.

There are numerous discussions about how to handle GIFs in kodular. (one complex solution : [Free] GifView extension Free for all : NEW Update 17/11/17 😋 😋 😋 😋 - ClassicExtensions - Community)
Most working solutions propose to use multiple images + clock to emulate a kind of GIF (Gif animated Extension. Clickable. Transparent Background - Extensions - MIT App Inventor Community).

One solution worked for me (Extension: Animated Gif Clickable. Transparent bg - #13 by Juan_Antonio - ClassicExtensions - Community, very last version) but I don’t know if it is working on every phone. Plus, it requires an extension.

OTHER SOLUTION (not better than last one)
My solution is inspired from App Inventor Code Snippets | Pura Vida Apps solution.
He proposes to use a WebViewer, that can display animated GIFs.
But we should find the place where the GIF is stored in the app assets, a bit complex.

I find that you could use a GIF to base64 (Base64 - Wikipedia) converter like this one :
GIF to Base64 | Image | Base64 Encode | Base64 Converter | Base64
(output format : HTML image)

In designer, use a WebViewer.
In code, use :
blocks (2)

GIF should display.

Hope this can help.

A. R.

Note : major problem : user can move GIF inside the webviewer (except if you use CardView with “full clickable” ON :wink:
You should disable zoom display/zoom on etc.

8 Likes
Help in .GIF images form Airtable
Any gif extension
Help in .GIF images form Airtable
#2

Good guide!

I even used a similar approach using Base64, plus it avoids uploading the file to Assets

1 Like
#3

You can also show gif by converting it into json and using lottie animation component.

Edit: doesn’t work.

2 Likes
#5

Your solution looks awesome.
I tried to convert my GIF with Convert GIF to JSON / GIF to JSON converter online & free — pdfmall.com then to use the JSON file as source for Lottie component, but I get error and app crashes.
What am I doing wrong ?

#6

I think problem is with gif or converted json file.

Try converting using GIF to JSON - OnlineConvert.com

Edit: doesn’t work.

2 Likes
#7

Note : the extension I linked in my main message (Extension: Animated Gif Clickable. Transparent bg - #ThunkableClassicExtensions - Community) seems to have a major flaw : changing the height/width of the layout does not change height/width of the GIF, but it crops it !

If you want to resize the GIF, this is not the solution to go for

#8

Not working either with this converter.
Problem may come from the GIF I’m using
Any idea why it fails ?

Optimization of the GIF maybe ?

#9

I dont have any idea.

#10

not working with the 3 (random, found on the internet) GIFs I tried.
May you provide the GIF that worked for you, so I can compare ?

#11

I was tried json file taken from lottie files.

#12

:+1:

buttons support gif(s)

#13

how please provide some information

#14

Just set your gif as button image

#15

i tried its not working plz provide aia how it works…
i set button background image to gif in designer property… but it only show as image not GIF

#16

try to set image of button from Designer property under property name “Image”

#17

btn
btn237×608 17.9 KB

not workingblocks (4) also not work

this also not working

working in only kodular site designer mobile not in companion and app…

if you are giving suggestion only by designer mobile then want to say that its not work in companion and app

1 Like
#18

Why not you use lottie animation component. It is very simple and easy.

You can also set it as clickable and trigger an event when clicked. It can work as button also.

Most important thing is that there are thousands of lottie files available, you can choose any as per your requirement.

#19

no i have own gif and want to use that …
in lottie component will gif works ?

#20

I think no.

#21

Yup, u r right, it worked in Designer only, I never considered trying in apk, my bad!

1 Like