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!

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!

• javascript
• jquery
• css
• animate.css

• To hide it just off the screen, personally I would do left: -(width of element) – aw04 Commented Dec 22, 2015 at 16:19
• @aw04 That doesn't work i'm afraid. – John Commented Dec 22, 2015 at 16:26
• What do you mean, it's just a value. What happens? – aw04 Commented Dec 22, 2015 at 16:28
• Well, as you can see in the question, i have already tried negative values to move it off screen which hides the element, but then it doesn't animate it in. it just stays off screen. – John Commented Dec 22, 2015 at 16:32
• Actually, now that I think about it... I'm not sure you need to do anything with animate.css. Doesn't it take care of that for you? – aw04 Commented Dec 22, 2015 at 16:34

3 Answers 3

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

animate.css actually takes care of this for you with it's animations. Check out the source of bounceInRight (which you are using). As you can see, it moves the x-value around using transform: trasnslate3d(...). As mentioned by @dwreck08 (+1), you only need to worry about hide/show.

@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;
  }
}

A solution which allows animating in and out

This example code es from Animate.css's own documentation. I have expanded on it to include adding and removing a show class, which will maintain state once the animation is plete.

const animateCSS = (element, animation, prefix = 'animate__') => {
    // Create a Promise and return it
    new Promise((resolve, reject) => {
        const animationName = `${prefix}${animation}`;
        const node = document.querySelector(element);

        // Add class to display element when animating in
        if (animation.indexOf('In') >= 0)
            node.classList.add('show');

        node.classList.add(`${prefix}animated`, animationName);

        // When the animation ends, we clean the classes and resolve the Promise
        function handleAnimationEnd(event) {
            event.stopPropagation();

            // Remove class to display element when animating out
            if (animation.indexOf('Out') >= 0)
                node.classList.remove('show');

            node.classList.remove(`${prefix}animated`, animationName);
            resolve('Animation ended');
        }

        node.addEventListener('animationend', handleAnimationEnd, { once: true });
    });
}

Set initial styles to display: none and create a show class with display: block. Then call the method we created with the following:

animateCSS('.services-panel__secondary', 'bounceInright');