Cool Toggle Switch Animations With jQuery And Anime.js

A collection of cool, smoothly animated toggle switches based on jQuery, anime.js, CSS/CSS3, and Checkbox or Radio input.

See also:

• 10 Best Toggle Switch jQuery Plugins
• 10 Best Toggle Switch JavaScript And CSS Libraries

How to use it:

1. Add the necessary JavaScript and CSS files to the web page.

<link rel="stylesheet" href="css/main.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/anime.min.js"></script>

2. Create checkboxes and radio buttons for the switches.

<div class="radio">
  <div class="wrap">
    <input type="radio" id="on" name="radio">
    <label for="on">ON</label>

    <input type="radio" id="off" name="radio">
    <label for="off">OFF</label>

    <div class="bar"></div>
  </div>
</div>

<div class="checkbox">
  <input type="checkbox" id="checkbox" checked name="checkbox">
  <label for="checkbox"></label>

  <div class="on"><span>ON</span></div>
  <div class="off"><span>OFF</span></div>
</div>

<div class="switcher">
  <input type="checkbox" id="switcher" name="switcher">
  <label for="switcher"></label>
  
  <span class="left"></span>
  <span class="right"></span>
</div>

3. The main JavaScript to enable the toggle switches.

$(function() {
  $('body').on('click', '#off', function() {
    $('.radio').addClass('off');
  })

  $('body').on('click', '#on', function() {
    $('.radio').removeClass('off');
  });




  anime({
    targets: '.checkbox .on',
    translateX: '0',
    zIndex: {
      value: [1, 2],
      round: true
    },
    duration: 0
  })
  anime({
    targets: '.checkbox .off',
    translateX: '-100%',
    zIndex: {
      value: [2, 1],
      round: true
    },
    duration: 0
  })

  var trigger = true;
  $('body').on('click', '.checkbox label', function() {
    if (trigger) {
      $('.checkbox').toggleClass('active');
      trigger = false;

      if ($('.checkbox').hasClass('active')) {
        $('.checkbox').prop('checked', false);

        anime({
          targets: '.checkbox .off',
          zIndex: {
            value: [1, 2],
            round: true
          },
          duration: 0
        })
        anime({
          targets: '.checkbox .on',
          zIndex: {
            value: [2, 1],
            round: true
          },
          duration: 0
        })

        anime({
          targets: '.checkbox .off',
          translateX: '0%',
          duration: 500,
          easing: 'easeInOutQuad',
          complete: function() {
            anime({
              targets: '.checkbox .on',
              translateX: '100%',
              duration: 0
            });
            trigger = true;
          }
        })
      } else {
        $('.checkbox').prop('checked', true);

        anime({
          targets: '.checkbox .on',
          zIndex: {
            value: [1, 2],
            round: true
          },
          duration: 0
        })
        anime({
          targets: '.checkbox .off',
          zIndex: {
            value: [2, 1],
            round: true
          },
          duration: 0
        })

        anime({
          targets: '.checkbox .on',
          translateX: '0%',
          duration: 500,
          easing: 'easeInOutQuad',
          complete: function() {
            anime({
              targets: '.checkbox .off',
              translateX: '-100%',
              duration: 0
            });
            trigger = true;
          }
        })
      }
    }
  });




  var zindex = 2;
  var t = true;
  $('body').on('click', '.switcher label', function() {
    if (t) {
      t = false;
      $('.switcher').toggleClass('active');
      zindex++;

      if ($('.switcher').hasClass('active')) {
        anime({
          targets: '.switcher .left',
          scale: 12,
          duration: 500,
          easing: 'easeInOutQuad',
          complete: function() {
            anime({
              targets: '.switcher .right',
              scale: 0,
              zIndex: {
                value: [zindex, zindex++],
                round: true
              },
              duration: 0
            });

            anime({
              targets: '.switcher .right',
              scale: 1,
              duration: 700,
              complete: function() {
                t = true;
              }
            });
          }
        })
      } else {
        anime({
          targets: '.switcher .right',
          scale: 12,
          duration: 500,
          easing: 'easeInOutQuad',
          complete: function() {
            anime({
              targets: '.switcher .left',
              scale: 0,
              zIndex: {
                value: [zindex, zindex++],
                round: true
              },
              duration: 0
            });

            anime({
              targets: '.switcher .left',
              scale: 1,
              duration: 700,
              complete: function() {
                t = true;
              }
            });
          }
        })
      }
    }

  });
});

---

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