0

I have a simple page that involves some animations. The first time the page is loaded, the user sees the end result of the animations for a split second, before going to the start of the animations. The animation sequence is of a blank screen, with words and sentences fading into or sliding into view. I am using the animation.css javascript library.

$(document).ready(function()
{
$('#pineappleCheesecake').addClass('animated fadeIn');

$('h1').addClass('animated rubberBand');

$('p').addClass('animated bounceInUp')

$('ul').addClass('animated lightSpeedIn');

});

I have tried using this instead of document ready

document.addEventListener('DOMContentLoaded', function() {
   // ...
});

But this did not work. I then tried taking the document.ready out completely, but I had the same results.

I could try having the page load with a black div covering the screen, which I would remove at the beginning of the animation, but it seems like a hackish way of doing it, and I suspect there's a simpler, cleaner, better way of removing the unintended glimpse of the end result. Please help.

3
  • Your ready hooks will load after the page is rendered. So, you're probably seeing the "final result" for a split second before JavaScript can initialize the animated elements to their starting state. Try disabling the script altogether and see if it stays on the "end result". Nov 1, 2014 at 19:58
  • Have you tried using the jQuery $(document).ready(function() { ... }); ? If so, show the rest of your code. Nov 1, 2014 at 19:59
  • Yes, it stays on the end result when script is disabled.
    – Goose
    Nov 1, 2014 at 20:10

2 Answers 2

0

Try setting all of the CSS values to their 'default' before the javascript runs. This may fix the problem.

5
  • Sorry, I thought everyone would assume I was initializing my code with document.ready, as I mentioned it in my question as something I took out. Yes, I was using document.ready.
    – Goose
    Nov 1, 2014 at 20:08
  • Nope. Same result. I'm trying to get the animation's starting point earlier. document ready and setTimeout only delay the animation.
    – Goose
    Nov 1, 2014 at 20:17
  • As I said in my question, I was aware I could do that, but was looking to see if there was a more direct, less hackish solution.
    – Goose
    Nov 1, 2014 at 20:19
  • Ok... This will cover the animation
    – DripDrop
    Nov 1, 2014 at 20:19
  • Nope. Does not work. Same result. The glimpse is probably happening before the javascript runs.
    – Goose
    Nov 1, 2014 at 20:23
0

I have found an answer to my problem. Although it is not the clean answer I was looking for, and I still suspect there's a more direct solution out there, I made this solution as simple as possible.

In the html, I surrounded everything in the body in a div bracket.

<div id="coverDiv">
...
</div>

In the CSS, I set it's properties to this.

#coverDiv {
    background: black;
    display: none;
}

In the javascript, I began the animation by displaying the coverDiv.

$("#coverDiv").css("display", "inline");

In actuality, the coverDiv doesn't cover, so much as it contains, and is revealed at the beginning of the animation.

Thanks to DripDrop for steering me towards this solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.