Initial state of element to be animated in

Question

I have an element that i would like off screen to begin with, but then on click of a link, that element gets animated in (using animate.css). But, i'm not sure what css method to use to hide that element off screen so it can be animated in.

The js i'm using is:

$('.services-wrapper').on('click','.services-panel__cta',function(e){
     e.preventDefault();
     $('.services-panel__secondary').addClass('animated bounceInright');
})

And i have tried doing:

position: absolute;
left: 100%

and

left: -9999px

But i'm not sure that even makes sense to try tbh.

Any help really gratefully received!

Answer 1

With animate.css, you don't need to specify the position beforehand. You can hide it with display: none; and then add an additional class that adds display: block;.

JS Fiddle

CSS

.services-panel__secondary {
  display: none;
}
.show {
  display: block;
}

JS

$('.services-wrapper').on('click', '.services-panel__cta', function() {
  $('.services-panel__secondary').addClass('show animated bounceInRight');
})

---

Or just use show() instead of adding the class:

JS Fiddle

$('.services-wrapper').on('click', '.services-panel__cta', function() {
  $('.services-panel__secondary').show().addClass('animated bounceInRight');
});

---

And Lastly

If you can edit the html directly, you can add the animate.css classes directly and just show() the element:

JS Fiddle

Add classes in html and hide with display: block;

<div class="services-panel__secondary animated bounceInRight">
  Bounce this in
</div>

JQuery- Simply show it and it will bounce in.

$('.services-wrapper').on('click', '.services-panel__cta', function() {
  $('.services-panel__secondary').show();
})

---

IMPORTANT:

With animate.css, notice that "right" should have an uppercase "R" like bounceInRight