Animation being lost due to pre-loader

Wappler General Need Help
1

I have a node.js web app with a main layout page containing the pre-loader.
In the views I have containers that I would like to animate.

'projects.ejs' page:

<header class="text-center mt-5" dmx-animate-enter="fadeInDown" style="color: #000096;">
  <i class="fa-clipboard-list-check fa-3x  icon_header far" style="color: #000096;"></i>
  <h1 class="font-monospace fw-bold">PROJECTS</h1>
</header>

main layout page:

<dmx-preloader id="preloader1" color="#674EA7" spinner="wanderingCubes"></dmx-preloader>

Due to size amount of data being loaded from the db the preloader takes a bit of time to complete, (varying from half a second to 1.5 seconds approx)
By the time the preloader has completed the animation has also completed on the page and is not visible.

How would i trigger the animation after the completion of the preloader so it is visible?

2

How about adding a toggle to the layout called preload_complete. On success of your db server connect, check that toggle.

Put your header code inside a conditional region, with a condition of preload_complete.checked

This will keep the header out of the DOM until you are ready for it to be seen, and thus animated.

3

Thanks Ken :heart_eyes:,

great suggestion, works beautifully, unlike AI's suggestion ...

1 Like