OP/AL is a free-to-use resource that helps users easily customize and download a set of 100 animated icons as code, ready to be implemented.

Visit www.opal.work to see it live.

This project emerged from a fascination with json files and the possibilities of live animation, driven by code. By tinkering with json files, we found relationships that established how certain variables affected the animations. One of the most important discoveries was that OP (outPoint) / AL (animationLength) = FR (frameRate). This equation allowed us to dictate the duration of animations after they had been exported, and from that, OP/AL was born.

We created the animated icon set OP/AL to provide the design community with a resource that has the flexibility to fit thousands of different use cases.By using Lottie and json files, we were able to create something powerful enough to accomplish all of this, but light enough to make an entire animated set around the size of a megabyte.

The goal of our approach was to provide as much creative autonomy as we could to the user, while still ensuring the generated icons communicated effectively. The most important constraints for guaranteeing readability were the use of two-pixel stroke and counterstrokes, and adhering the icons to a 24x24 pixel grid. Because the design of each icon was determined from its smallest and thickest possible iterations, they’ll always remain legible despite changes in scale or stroke weight.

While the design constraints helped in creating the set initially, animation is where we were most excited to explore the code and create parameters. This allowed us to set limits and relationships for certain variables, providing an additional level of quality control to the assets the tool creates.

Though this project was originally conceived as a vehicle for exploration in json, it evolved into a more specific and directed effort. Its final form allowed us to contribute to a larger goal of visioning design and animation for scale through simple and accessible tools.