In wordpress start an animation on after the page has been fully loaded

Question

I have a wordpress site, and I added some "raw html" element with some animation to it. The problem is, the animations start with the page load, and don't wait for the preloader to finish, and the page itself shown.

Does the preloader stop once the page is loaded? (I believe the page keeps doing more staff after being "loaded")

I am a newbie to wordpress (and indid to JS) so, I am not editing the wordpress php/js files themeselves... only using a "RAW HTML" element.

Thanks!

Answer 1

If you are not comfortable coding such things, I suggest you to take a look at plugins like AniJS combined with ScrollReveal.

You can then put this on any tag (body, p, div, ...)

data-anijs="if: DOMContentLoaded, on: window, do: yourAnimation animated, before: scrollReveal, after: holdAnimClass"

DOMContentLoaded (and other loading options) checks if the navigator has loaded the whole page, for then playing the animation on scroll (you can do without scroll too by removing "before: scrollReveal" and then holds the class of the animation so that it don't loop forever.

Answer 2

Put you animation JS in this

$( document ).ready(function() {
  // Handler for .ready() called.
});

function is executed when the DOM is fully loaded.