For creating clip-path animation, Live Demo
Install
CDN
NPM
npm install --save ani-clipath
Usage
Need a container with width and height
...
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 = el: '.shapes' speed: 1000 delay: 30 autoplay: true autoplayInterval: 5000 shapes: data </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%'