Press "Enter" to skip to content

Chain Anime.js Calls on jQuery Selectors

jQuery.anime.js is a small plugin (<1 KB) for the awesome Anime.js file. JQuery plugin for anime.js animation engine JavaScript that allows you to apply multiple animations to the same element by sequencing anime.js style calls.

anime js timeline example, anime js multiple animations, anime js svg path, anime js not working, anime js svg morph, anime js transform origin

Features:

  • Anime.js series calls for a more readable way.
  • Supports the latest versions of Anime.js with all options.
  • Very little space (approximately 600 bytes).

How to make use of it:

1. Load the wanted jQuery and anime.js libraries within the doc.

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

2. This instance reveals methods to chain collectively a number of anime.js calls.

<div class="demo">
  webcodeflow.com
</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;
    }
  })
});

Chain Anime.js Animation Calls, jQuery.animejs Plugin/Github, anime js documentation, anime js reset animation


See Demo And Download

Official Website(ohmycode): Click Here

This superior jQuery/javascript plugin is developed by ohmycode. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *