ani-clipath v0.0.8

Install

CDN

<script src="https://unpkg.com/ani-clipath/dist/ani-clipath.min.js">

NPM

npm install --save ani-clipath

Usage

Need a container with width and height

<style>
  .shapes{
    width: 800px;
    height: 600px;
  }
</style>
...
<div class="shapes"></div>

Props

Methods

<script>
  var aniClipath = new AniClipath({
    el: '.shapes',
    speed: 1000,
    delay: 30,
    autoplay: true,
    autoplayInterval: 5000,
    shapes: data
  })
  setInterval(function(){
    aniClipath.next()
  },3000)
</script>

Data format of shapes

var data = [
  [
    // item of shapes
    { 
      // color of item
      c: '#1A1A1A',
      // polygon position of item
      p: [ { x: '50%', y: '30%' }, { x: '30%', y: '70%' }, { x: '70%', y: '70%' }]
    }
  ],
  [
    {
      c: '#E6E6E6',
      p: [ { x: '50%', y: '70%' }, { x: '30%', y: '30%' }, { x: '70%', y: '30%' }]
    }
  ]
]

License

MIT