Free Pliops data constraint diagram Animation

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.

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.