Show animation when launching app?

Hi i was wondering, if it possible to show a logo animation every time the app launches, in order to hide the spinner while the app logs in automatically.(or even only to show the animation)
From what i know, there is no ready made way of doing it but i was looking for a more diy approach,
Do you have any ideas?
Or do you know if its even possible?

Thanks for the help!

Create a new page
Set it as the first page on the navigation tab

Add a lottie animation

On Page mounted, add a delay of your choosing and connect it to an open page node which will open the next page automatically.

3 Likes

Hey @PRAJWAL_SHARMA , first of all thanks for your idea,
this idea sounds like what i was thinking but i didnt know how to set a page as first. Correct me if im wrong, but with your way wont the navigation bar be visible while the animation plays, because if you take a look bellow, my first page is only for signing in and there is no navigation bar. Because from what i know the firebase auth page is automatically the first page to be opened.

If you are using authentication, then your fist page is your initial view.(login page)

here you can create two containers. one for the login details and one for the animation. on page mount you can show the animation for 5-6 seconds and then make it invisible.

bind the animation container’s visibility to a variable say animation_visible.

Then bind the login container’s visibility to NOT(animation_visible)

On page load

  1. Set animation_visible to true
  2. Delay for your preferred time
  3. Set animation_visible to false

Perfect, thank you i didnt that the only thing missing is the animation, do you know with what component i can import an animation (i want to test it with a simple gif until i make my own lottie animation as you said).

You can use an imagebox for gif. But lottiefiles can convert your gif to lottie on the click of a button

1 Like

And if i convert the gif to lottie as you say, how im i going to insert it in the app (using what component) because i cant find out.
Thank you in advance

I just found out that theres a lottie component in component marketplace.
Thanks

1 Like

Hi, a question: In distribution, I uploaded in “Splash Screens” for the start of the app, but when I activate, for example the “Authenticator” to choose a custom home page as a GIF and then go to the page (So far we are doing well). But when I do that, it shows me first the “Splash Screens” when it is compiled and does not show me the page that I order first to start with my GIF, but in the “PREVIEW” if I get as I thought, but when I destroy it, it shows me the “Splash Screens”.

In this case, what can I do?

Thank you very much.

can you screen record the issue, because i cant understand it exactly, also do you use one page and play with visibility or two different pages?

1 Like

Perfect, as this very slow the compiled because I deleted it, but if I can explain you by means of images, please give me a moment and I will send you the captures immediately. Thank you very much.

1 Like

Here this a small animation of how in the preview if it makes the effect that I need, but when I compile, and I open the application, the screen that I configure in the capture 1 appears to me, and later it appears again the beginning that I want to make the effect (Remaining this way with 2 repeated beginnings). Because when it happens that the first startup is the screen that I configure to be able to compile (that is in the capture 1), how could I give it more time as I did in the short animation?




1 Like