Performant Sliding/Scrolling Animation Library – animasiTextSlide

Preview:

Description:

animasiTextSlide is a performant and customizable JavaScript animation library that makes it possible to scroll/slide through a group of elements in a container.

How to use it:

1. To get started, load the animasiTextSlide.js files in the document.

<script src="js/animasiTextSlide.js"></script>

2. Add your elements to the animasiTextSlide container as follows:

<div class="containerAnimasi">
  <div class="textAnimasi">
    Content 1
  </div>
  <div class="textAnimasi">
    Content 2
  </div>
  <div class="textAnimasi">
    Content 3
  </div>
  ...
</div>

3. Initialize the animasiTextSlide and done. Note that you can have multiple instance on the same page.

animasiTextSlide({
  animasi1 : {
    // options here
  },
  animasi2 : {
    // options here
  },
  animasi3 : {
    // options here
  },
  // ...
});

4. Available options.

{
  // animation delay in seconds
  durasiDiam: 1,
  // duration in seconds
  durasiKembali: 3,
  // animation speed in seconds
  durasiScroll: 1,
  // determine whethert to loop the animation
  ulangi: true,
  // start from:
  // atasKeBawah: top to bottom
  // bawahKeAtas: bottom to top
  mulaiDari: 'atasKeBawah'
}