Canvas Based Slice Slideshow With jQuery And GSAP

A simple, fancy jQuery slideshow plugin that uses HTML5 canvas element and GSAP's TweenMax library to create a slice animation when transitioning between images.

How to use it:

1. Create the slice slideshow from a normal HTML unordered list as this:

<ul id="banner">
  <li>
    <img src="1.jpg">
  </li>
  <li>
    <img src="2.jpg">
  </li>
  <li>
    <img src="3.jpg">
  </li>
  ...
</ul>

2. Include the needed jQuery library and GSAP's TweenMax library on the webpage.

<script src="jquery-3.1.1.slim.min.js"></script>
<script src="TweenMax.min.js"></script>

3. Include the main JavaScript file after jQuery library.

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

4. The required CSS styles for the slice slideshow.

ul#banner {
  position: relative;
  width: 800px;
  height: 500px;
  overflow: hidden;
  margin: 0 auto;
}

ul#banner li {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

ul#banner li img { visibility: hidden; }

ul#banner li canvas {
  position: absolute;
  top: 0;
  left: 0;
}

---

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