I am working on a simple App, a kind of bulletin board. On the main page, I upload 15 news, with its corresponding image, its title, category, publication date and short text.
Everything loads correctly, but in addition to taking a few seconds, the vertical scrolling slows down and jerks.
Well, I have not commented that the images are 1280x635 GIFs and I suppose that because of those images everything slows down.
I have tried to convert the images into “lotties animations” and curiously, although the size of the “json” file that is generated is much larger, the animations are reproduced more fluidly and the vertical scrolling works correctly.
I do not understand why the GIFs do not play correctly
this is a wild guess, but if I am not mistaken lottie compresses gif. So for example if the default gif has 1280x635 and 3MB, lottie would have the same resolution but with size much much smaller. That means that page is loading much faster.
It also depends how do you do load these gifs. Do you upload them on the AppGyver and then just show them or is there any backend of yours?
In general, Lottie animations run more efficiently than GIF, It’s just the way they are processed differently. Lottie files are basically images converted into lines of code that produce animation algorithmically, which in some cases is more efficient than loading and displaying multiple, individual frames of a GIF.
The animations are simple and I created them with CANVA. I had the option to generate an MP4, but since they cannot be loaded into Appgyver as a page component, so I generated a GIF.
GIFs are retrieved from Firebase and then stored in an application variable.
But as I mentioned, animations are jerky and vertical scrolling works poorly.
I opted to convert the original MP4s into “Lotties animations”, via https://observablehq.com/@forresto/video-to-lottie.
I get a file in “json” format with quality images and a fairly fluid animation.
I reduce the images to 75% quality, but I generate enough frames so that the animation is good … in short, the size is greater than the GIF.
I could reduce the quality of the images much more, reduce the number of frames, or make the images smaller, but they would lose quality.
So I don’t understand why a few GIF images can cause so much trouble and slowness.
Another problem that I observe is that the page is displayed, with all the content of each of the cards, but without the lotties images appearing immediately.
Wait 3-5 seconds for them to start showing one after the other and the animations to start playing.
Would it be possible to control that the page was not displayed until all the lotties animations had been loaded?