How to make puzzle animation?

Question

css

Hello. You need to make an animation in the slider so that the puzzles appear one by one.


Pictures will initially be solid, how can they be cut into js-th puzzles?
Squares, circles, rectangles - I saw this in the examples, but how can you cut it into puzzles so that they then appear in turn?

Answer 1

If we are talking directly about curly puzzles, then the option with cut here is probably not applicable. If I were you, I would look towards creating SVG shapes with a white fill and tiling the top block above the picture with them. Then it remains only through JS to give them the effect of disappearance.
I was interested in the topic, I decided to dig deeper, I came across such a script , I think if you take the time to analyze it, you will get exactly what you need.