0

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 :)

msqar
  • 2,940
  • 5
  • 44
  • 90

1 Answers1

0

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)

Ramón de León
  • 94
  • 8
  • Yes, until that i get it, but then how would i create a GIF based on this? Do you know? I need a GIF file to be created. – msqar Oct 30 '21 at 21:52
  • I know a way o do this in Python using PIL, not in JS though, you could also try using something like Lottie, it has an SVG and a Canvas renderer. Lottie JSON files are basically base 64 encoded image sequences but they're much more lightweight – Ramón de León Oct 30 '21 at 22:00
  • I see, but in my specific case where everything is dynamic, i can't use Lottie :( i got separate PNGs already of the respective layers to be animated. – msqar Oct 30 '21 at 22:04
  • Ah, may I ask if you **need** it to be a base 64 encoded gif? – Ramón de León Oct 30 '21 at 22:13
  • do you have any tutorial in Python? Maybe i could learn from that and do it. I just need to generate N amount of GIFs based on these stacking animations. You sure is possible? – msqar Oct 30 '21 at 22:30
  • 1
    Sorry, I don't have a good tutorial on how to do it but here are some resources:https://stackoverflow.com/questions/24688802/saving-an-animated-gif-in-pillow/54379281 then, if you need it encoded just import `base64` and use this function: `def encodeImage(img): return str(base64.b64encode(open(img, "rb").read()))[2:-1]` – Ramón de León Oct 30 '21 at 22:43
  • I'll check thanks. Hope there's something like that in JS, tho. – msqar Oct 30 '21 at 22:46
  • Yeah, me too, there's like a library for everything so this seems weird LOL – Ramón de León Oct 30 '21 at 22:48