How to remove an animation after it has completed?

[leksak]

How does one remove an animation once it is completed? For instance, after the bounceIn animation has finished its animation how does one ensure that it isn't animated once more? And, when a new call to Morphext is performed that the animation runs again.

I tried this,

$("#prompt").Morphext({
    speed: 2000,
    complete: function () {
        // Called after the entrance animation is executed.
        this.stop();
        setTimeout(function() {
            // Remove the span while keeping the text.
            var wrap = $('span.animated.bounceIn');
            var text = wrap.text();
            wrap.replaceWith(text);
        }, 1900);
    }
});  

and obviously I have no idea what I am doing.

[MrSaints]

Hey @leksak,

What's your desired use case / outcome? Is it that you just want to loop through once?

Thanks!

[leksak]

@MrSaints. I want to write a function, that when called, will perform the animation just once. Any subsequent calls to the function should also trigger the animation.

Thanks!

[leksak]

Please let me know if I can clarify any further.

[simplenotezy]

I would like this as well. Would be great with a parameter like:

loop: false,

[simplenotezy]

Solution:

You can omit this library, and only pull in animate.css, then add the following class to any HTML element:

<h1 class="animated bounceIn">This will bounceIn</h1>
<h1 class="animated rollIn">This will rollIn</h1>

(add animated following by the animation from animate.css you'd like).

For a list, see: https://github.com/daneden/animate.css#basic-usage