Myths, Tips, and JSON Tricks

Get The Most Out Of Your UI Animations Using JSON

September 25, 2020
Sarah Corner
Designer & Animator

We get it! JSON is great, and if you don’t believe us, check out our article explaining why it’s the superior option when pitted against GIFs, PNG sequences, and MP4s. However, no matter how great JSON is, it will only be as stellar as its execution. Understanding the advantages and disadvantages of assembling your JSONs will make for a smoother process.


Before we get into it, we need to understand the limitations of JSON, and boy have we found them. Discovering them has improved our own animation workflow by simplifying our After Effects files, slimming our animation content, and this has assisted in creating fabulously small file sizes.


What can’t a JSON do?

  1. Effects: This means that your habit of using gradient ramps is a no-go, and as for that turbulence — It has got to hit the curb.
  2. MP4s and MOVs: JSON won’t embed MP4s and MOVs.
  3. Hidden layers: All of your hidden layers will not be exported unless explicitly indicated at the export scene.
  4. Unused strokes and fills: This means that when you make a shape and set the fill opacity to 0, your JSON file might export nothing at all. Delete any unused attribute and hide all unused layers (or just delete them entirely.)
  5. Export feathered masks: JSON doesn’t support feathering of any kind. Get that otta here.
  6. Clean your dishes: Do it yourself, coward.


Myths:

  1. JSON can’t export masks: JSON can, in fact, export masks and they often don’t affect your file size (even when animated, feathered, or inverted).
  2. JSON can’t export images: Images will significantly increase the size of your file, especially if you slap a full-resolution image in and scale it down. If your full resolution image is 2MB, your JSON will be 2MB and then some if you added animations on top of it. 
  3. JSON can’t export gradients: If you’re using your Gradient Fills right in your shapes, then your gradients should be exporting properly. Don’t use Gradient Ramps. 
  4. JSON will replace GIFs: At the moment, JSONs will do no such thing. When the day comes that Twitter will accept our memes as JSON files, then we might reconsider this. 
  5. JSON can’t export strokes: Whoever spread this rumor can meet Sarah in a back alley for a fisticuff
  6. JSON can’t export text: It can! But they must be converted into glyphs (basically the JSON way of Creating Outlines in Illustrator). This doesn’t add much to the file size, but boy howdy does it take a hot sec to export.


What can JSON do for me?

  1. Vector objects: Those Illustrator files aren’t going to animate themselves. As long as they exist locally in After Effects as shapes, you’re good to go.
  2. Keyframes: Keyframes of any type—linear bezier, spacial interpolation, hold, you name it—are fair game with JSON.
  3. Masks: All masks and mask keyframe animations are fair game. 
  4. Precomps: When you export your JSON file, you can export your main composition, and you can also export each precomp individually if you need to — all at once!
  5. PNG sequences: So long as the sequence is arranged in After Effects, you can export it as a JSON and have those images embedded. Though, fair warning: The file sizes will be just as large as the original images. 
  6. Transparent backgrounds: It will only export visible assets unless otherwise indicated on the export screen. This means that if you don’t have a solid layer in the background, it won’t export a background.

JSON files are, among other things, meant to reduce file sizes and improve site performance. The tradeoffs in order to achieve this involve many graphics-heavy effects which, on their own, would significantly weigh down a website. These tips will dramatically improve the animation process in a way that tailors After Effects files specifically for web production.

For more information on JSON’s — slide into our DM’s.