I'm trying to find a way to create an animation based on a set of PNG layers, maybe be able to animate them through CSS or some library, and then based on that, get an encoded base64 GIF. Is there any library that does this?
My animation should be quite simple, imagine like a vertical pile/stack of items, that goes from top (out of image), and the fall down to a certain bottom position so they end up piled up altogether touching each other emulating some gravity. Now, I need this to be dynamically as the items to be stacked are different, and they can also be in different order.
I'm already handling this but I was wondering about any Javascript library that does this conversion and allows me to animate each layer as well.
For an old project I used a library called "merge-images" from Lookchilds. But this is only for normal PNGs to be merged into a single PNG. And it's using HTML Canvas as a medium to process all this.
Any help or suggestion would be greatly appreciated :)
Just add a container <div> with your dimensions, then add your images with absolute positioning so they're able to overlay each other and position them correctly. You can adjust the layer order with z-index or translateZ()
If you have an image sequence type-thing you can use a similar structure to this:
<img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 0ms">
<img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 5ms">
<img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 10ms">
<img class="anim-img" src="your_img_path.png" style="--anim-delay-offset: 15ms">
.anim-img {
animation: anim;
animation-delay: var(--anim-delay-offset);
}
@keyframes anim {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
(Saw this trick in one of Fireship's videos)