Hacker News new | ask | show | jobs
by devrelm 3354 days ago
This one isn't actually /too/ complicated. It certainly uses some advanced techniques -- transitions, clip-paths, nth-child -- and I'm not sure (haven't checked) if or how it works in browsers other than Chrome, but the fact that you _know_ you'll have 30 shards greatly simplifies everything.

If you can have a designer draw up the basic design, then you can one-by-one take the shards & put them into place with CSS. From there you can set up some animations on specific shards to make it seem like everything's moving together. From there, you basically have one animal. It'd be time-consuming, but would work.

The css selector for a particular animal's shards start with a `.<animal>` class selector, so that you change the animal class in a parent and all the shards move into place.

It looks like they're still using some javascript to set "states", which seem to trigger animations. I'm honestly not sure why they decided to do that rather than just using keyframes with animations, though I imagine that it may have been that animations were firing before the transition between animals finished, which would have caused a little bit of weirdness.