A Simple Animation

I have a “Save” button in an app I’m working on and I’d like, when the user taps it, for the word “Saved” to go from 0% alpha up to 100% and then back to 0 again. Perhaps over a 5 second time span. I’ve watched some videos on how a timer works in Thunkable but I’m stumped. Can anyone suggest how I can accomplish what I want to here? Appreciate it!

Michael

I find the Timer component to be really unintuitive. You can use it but it may be easier to have two “count with i” loops and use the i variable as your alpha channel.

Here’s how to make it fade over 5 seconds:

Just reverse the count from 0 to 1 to make it appear.

1 Like

Always a helpful reply from @tatiang! I’ll give this a try and let you know how it goes. Thx!

I tried your code out on my project and it definitely works. Thx! I come from a Flash actionscript background and I have to say that I would never think of the blocks you have here. I mean, I certainly get the idea of counting down from i = 1 to 0, but I wouldn’t have thought of changing a label’s rgba values by using this join block to adjust one value. That’s wild! I would have thought that the solution involved either alpha or visibility levels. How did you even think of this approach?

Michael

1 Like

There isn’t a transparency value or even a separate alpha value for components. It’s all done within the component’s “color” property. I’m used to using opacity in Illustrator and other app development tools so I had to adjust to Thunkable. But as far as I know, the “a” in “rgba” is the only way to adjust that value using blocks.

You can do a surprising number of powerful/flexible things in Thunkable by modifying text strings with the join/replace all/substring blocks.

2 Likes