A lightweight split image animation in canvas.
Visit the live demo here
var myAnimation = new ImageSplit({
parent: '.container',
image: 'https://picsum.photos/1280/720',
});
Name | type | Default |
---|---|---|
parent | null | Query Selector |
image | null | Image to animate |
Name | type | Default |
---|---|---|
animationDuration | 1.2 | animation duration |
intensity | 100 | intensity of the animation |
linesNumbers | 32 | number of line for the image |
myAnimation.animationHoverIn();
Animate splitmyAnimation.animationHoverOut(Int);
Animate slipt endmyAnimation.animateNext(Image);
Animate to change image with a next directionmyAnimation.animatePrevious(Image)
Animate to change image with a previous directionmyAnimation.updateLinesNumbers(Int)
Change the number of linesmyAnimation.resetAnimate(duration)
Reset with an animation
myAnimation.el
ElementmyAnimation.property
Element property (height, width)