Animation components

Dont know if a lot of people here know, but for those wanting to add a little more lively animation to their apps there is a Lottie Animation view component on the Marketplace (token: WRWzxgnCJlhsaHwwf97HrA), and there is a whole community providing free downloadable Lottie files at Lottiefiles.com if you dont have time or skill to make your own.

Also there is an Animate Component flow function on Marketplace too (Token: 50fkNU_KY3W7bnH-GclgsQ) which has a lot of cool effects that can be applied to almost any of the Page components.

These tools really help bring your apps to life for those that need it.

10 Likes

Thanks John!

I didn’t know about the Lottie Animation component. I am going to dive in!
Some hidden gems in the component marketplace!

Amazing John! Could you post an example of an animation you’ve achieved and what was your configuration? It would help a lot, thanks!

Hi !
I tried to integrate a Lottie animation to my app, from lottiefiles.com, without success. How should it be done?
Should I just paste the Lottie Url in the “Animation Source” field?
Or should I select Json in the “Source type”?

Thanks

I just did ‘Source type’: json, and for ‘Animation Source’ I pasted the json data into it

I never tried it with a URL link

You might need to be careful when using the Animate Component in context of Android. In the past, i had lots of crashes in combination with the visibility flag of containers and I think not all of these are fixed yet. Unfortunately these are all race conditions so you need lots of testing here.

Just want to add also that animated .GIF files are also supported. I like to go to https://giphy.com/ to get free ones there.

Hey @JOHN_WORSHAM, how did you get the Lottie Animation to work with the JSON? Every time I paste the JSON into a formula it crashes the AppGyver development app.

I just pasted it right in Animation Source, just as text not a formula:
Capture

2 Likes

@JOHN_WORSHAM What maximum text size is allowed in the “Animation source” field?

As I mentioned in another thread, due to the problems of reproducing the animations of my GIF images, I have chosen to convert them into “Lotties animation” files in “json” format, but the files are quite large, and I also have them stored in FIREBASE.

I have configured “Source type = URL” and “Animation source = Path of the file retrieved from FIREBASE” and everything works fine, although it takes a few seconds for animations to display.

The problem I have is that I had implemented the copy in Cache, so that if the user did not have an internet connection, he could at least see the content stored in Cache, but when using Lotties as URL, instead of the initial GIFs, the animations they are not downloaded in Cache, since only the URL is available (however with the URLs of the GIFs if they were downloaded).

I intend to read the text content of the “json” file, to assign it to the “Animation source” field, using “javascript”, but I’m not having much success.

I intend to read the text content of the “json” file, to assign it to the “Animation source” field, using “javascript”, but I’m not having much success. Testing Javascript: Returns no output)

I dont know I have never run into a limit before.

The first limit I find in FIREBASE, when trying to include the content of the JSON file in a field of type string.

That’s why I keep the URL option and that’s why I intend to read the text content of the “json” file, to assign it to the “Animation source” field, using “javascript”, but I’m not having much success. Testing Javascript: Returns no output)