Pliops data constraint diagram

Client wanted a vector animation and I thought a .JSON file would be fine. But they insisted on an SVG for final output, so as to use online. They didn't seem to know what a .JSON file was or how to embed it for their website.

Anyway I created the the art in Adobe Illustrator based on their sketch. Used Overlord to transfer the vector into After Effects.

Used Bodymovin to export as .JSON file.

Finally I used the KeyShape app to export to .SVG.

Challenges: Bodymovin doesn't seem to a lot of gradients. It also didn't like me using a loop expression. Sometimes the whole project would fall apart on export The tiny orbs racing on the lines were the biggest culprit and I had to rebuild them so Bodymovin would export.

Once the .JSON was imported into KeyShape it glitched a bit too.

All eventually turned out fine with a lot of finessing, rebuilding, and reimporting some of the art from Illustrator.

So if you find yourself with a broken export, keep trying.

11 months ago
  • Bodymovin Version: 5.7.11
  • Resolution: 1300 x 1300
  • Filesize: 244.83 KB ( 22 layers )
  • Colors
Report animation