Chain Anime.js Animation Calls In jQuery - animejs

A jQuery plugin for the anime.js JavaScript animation engine that allows you to apply multiple animations on the same element by chaining anime.js method calls.

See Also:

• Simple jQuery Plugin For Chained Selects - Chained

How to use it:

1. Load the needed jQuery and anime.js libraries in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/anime.js"></script>

2. This example shows how to chain together multiple anime.js calls. See anime.js documentation for full animation parameters.

<div class="demo">
  Animate Me
</div>

jQuery(document).ready(function($) {
  $('.demo').animejs({
    left: '240px',
    backgroundColor: '#FFF',
    borderRadius: ['0%', '50%'],
    easing: 'easeInOutQuad',
  }).animejs({
    translateX: 250,
    duration: 3000,
  }).animejs({
    translateX: 270,
    direction: 'alternate',
    loop: true,
    delay: function(el, i, l) {
      return i * 100;
    },
    endDelay: function(el, i, l) {
      return (l - i) * 100;
    }
  })
});

---

This awesome jQuery plugin is developed by ohmycode. For more Advanced Usages, please check the demo page or visit the official website.