ani-clipath

For creating clip-path animation, Live Demo

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

Property	type	Description	default
el	String	DOM container	empty
speed	Number	Animation speed of each triangle	1500
delay	Number	Animation delay of each triangle	30
autoplay	Number	Play automatically	true
autoplayInterval	Number	Intervals of autoplay	5000
shapes	Array	Data of shapes	Array

Methods

Method	Description
next()	Switch to next shape
previous()	Switch to previous shape

<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