Example Project: Fade-in and fade-out column, progress bar, text-based loading animations (proof of concept)

I thought this might be handy for someone. Just playing around with trying to do animations within Thunkable without using Lottie files. These are only tested in iOS but most likely work in Android. (Update! The fade-in column does not work correctly on Android; use this version to see the other examples in Android).

Project link
https://x.thunkable.com/copy/179edd8cce5e70cf619eae8c40a721a4

Fade-in column
This fades in a column that is not visible when the app first starts. Could be useful for smooth transition between a settings screen or similar. Biggest hold-up here is that you have to change the color of all items in the column—hopefully Thunkable team will add opacity control to containers, so you can lower the opacity of all items in the container simultaneously.

(note: the column that fades in is set to 112% height (among other customizations) so that it works correctly on my test device, iPhone X).

Progress bar
An attempt at animating a progress bar within Thunkable, not using Lottie animations. A row within a row changes its width as the animation plays. This could be hacked apart and used to progress a bar as each of several functions run during a splash screen, etc. Just a proof of concept so not really functional as a real progress bar in this example.

Text-based loading animations
Simple loops that use emoji and unicode to show something like a loading symbol. Not super impressive but maybe useful for someone.


I thought some of this may be useful to someone so just sharing here in case it is. Thanks!

12 Likes

Wow, awesome stuff!
This will definitely be very useful for a lot of people… This post should be pinned turned into a (or some) built-in tutorial(s)!

1 Like

Great suggestion @lflfm

Thank you :slight_smile:

How did you add the emojis?

In MacOS, I was able to just copy/paste them from a Unicode list on the web.

1 Like

On windows you can press windows + .

2 Likes

Thanks to both!

Amazing!
Thank you very much!
How can I make the progress bar goes backwards?

1 Like

thank you so, so, much!

1 Like

You can have the countTo250 variable change by -1 is you want to have a count down…but then your should probably rename it countTo0 to make it more descriptive.

Amazing logic :slight_smile: @domhnallohanlon
Thank you!

1 Like