The initial state of the item to animate in

Question

I have an element that I would like to disconnect from the screen, but then, by clicking on the link, this element will be animated (using animate.css). But I'm not sure which css method to use to hide this element from the screen so that it can be animated.

I am using js:

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

And I tried to do:

position: absolute;
left: 100%

and

left: -9999px

But I'm not sure it even makes sense to try tbh.

Any help is really appreciated!

Answer 1

With animate.css you do not need to specify a position in advance. You can hide it with display: none;, and then add an extra 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');
})

---

show() :

JS Fiddle

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

---

html, animate.css show() :

JS Fiddle

html display: block;

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

JQuery - , .

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

---

:

animate.css , "right" "R", bounceInRight

Answer 2

animate.css . bounceInRight ( ). , x transform: trasnslate3d(...). @dwreck08 (+1), /.

@keyframes bounceInRight {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
    transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
    transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}