Animate images with JavaScript: split, rotate, and move them easily with mamImageSplit.js
Are you looking for a way to animate images using only JavaScript?
This page introduces mamImageSplit.js, a lightweight library that makes it easy to animate images by splitting, rotating, moving, and fading them out.
It’s a flexible script that can be used for image boards, interactive effects, and various visual presentations.
How to use
Download mamimgsplit.js using the button above.
In the file where you want to use mamImageSplit, include the script as follows
using a relative or absolute path:
<script src="./js/mamimgsplit.js"></script>
Create a <div> element with the class name "mam-image-split".
Set the data-split attribute to specify the maximum number of vertical or horizontal splits.
Then place an <img> tag inside this <div> as its child element.
<div class="mam-image-split" data-split="20" >
<img src="Image URL">
</div>
Example
<div style="display:flex;">
<div style="width:20%;"></div>
<div class="mam-image-split" style="max-width:800px;width:80%;" data-split="20">
<img src="./imgs/0001s.jpg" style="width:100%;">
</div>
<div style="width:20%;"></div>
</div>