How to hide animated elements on load?

Question

I'm using animate.css with waypoints.js in my landing page. I want to animate elements when user scrolls the page. But, the problem is that I need to hide elements before the animation starts(if i don't hide, animate.css hides element first and then animates in, that looks pretty ugly).

However, I solved problem by adding two classes in my css but it creates another problem.

.visible{ opacity: 1; }
.invisible {opacity: 0; }
// I added following jquery code 
$('elem').removeClass('invisible').addClass('visible fadeInUp');

This works good until I add animation-delay to an elements. Here is an explanation what I want to achieve. I've elements like this:

<ul>
 <li>element1</li>
 <li>element2</li>
 <li>element3</li>
</ul>

I want to add animation delay to each of the elements, so that they fadeInUp after each other with a specified seconds in each of the elements using animation-delay property. I can't get this to work. I tried following code without using animation-delay but no success.

$('elem').each(function() {
  // code with delay using timeout
  setTimeout(function(){
   $(this).removeClass('invisible').addClass('...');
  }, 100);
});

Let me know if my approach is completely wrong? If yes, then can you provide better way to accomplish.

score 27 · Accepted Answer · edited Jul 12 '14 at 15:57

27

You can do it with only CSS.

Let's say you are trying to animate a title. Give your element's class this css:

.title { visibility: hidden; }

and give the animated class (which comes from the animate.css) this css:

.animated { visibility: visible !important; }

When it hits the waypoints view it will add .animated per animate.css's code and then it will be visible for the animation.

edited Jul 12 '14 at 15:57

sushain97

2,752
1
25
36

answered Jul 12 '14 at 15:16

user3319362

286
3
4

score 12 · Answer 2 · answered Jul 10 '15 at 19:22

12

Avoid using !important by stacking classes:

.hidden-load {visibility: hidden;}
.hidden-load.animated {visibility: visible;}

answered Jul 10 '15 at 19:22

isherwood

58,414
16
114
157

score 1 · Answer 3 · answered Jan 07 '16 at 07:17

You can do this with opacities. Add a blank class to the div elements that you will want affect. Once the jquery attaches the animated class with waypoints, you can have bring it back to life with opacity: 1.

.to-be-animated {
  opacity: 0;
}

.to-be-animated.animated {
  opacity: 1;
}

score 1 · Answer 4 · edited Mar 24 '22 at 10:57

You can hide elements on load and then show and animate them after some delay using CSS and keyframes:

// keyframes fadeIn Animation
@keyframes fadeIn {
    0% {
        transform:scale(0,0);
        visibility:visible;
        opacity:0;
    }
    100% {
        transform:scale(1,1);
        visibility:visible;
        opacity:1;
    }
}
// CSS class
.containerDiv {
    visibility:hidden;
    animation: fadeIn 3s forwards 3s;
}

How to hide animated elements on load?

4 Answers4

Linked