Help

1. We make our designs in Adobe Illustrator.
2. After we import our illustration in to Adobe After Effects we get to animating.
3. Once the animating is finished, we export it using the Bodymovin plugin that will export the animation as a JSON file, and then is loadable using Lottie.

• Loop (default)
• On hover
• On click
• Morph
• Activate / Deactivate

• Play on scroll percentage
• Play on load
• Don't play on load

• Playback speed determined by cursor closeness
• Playback with scroll

Our animations come as JSON and GIF files.

To use the JSON file (Lottie) there a few ways to get them up and running depending on your platform. Technical knowledge will be needed to include these.

1. Using our custom element to load and display the animated icons, our custom element will also handle animations that have non-default interaction types such as 'morph' and 'activate-deactivate'.
2. Using the Lottie Web Player.
3. Using the open-source libraries available that best suit your platform: Web, iOS, Android, Flutter, React Native, Xamarin, NativeScript, Windows, Vue, Angular, Qt, Skia, Framer X, Webflow, and Sketch.

GIFs can be used in presentations, videos or included in html using the <img> tag.

Yes you can, there a few ways to do so.

1. If you are using our custom element you can add a 'color' attribute like so: <lottie-interactive color="#8f43f0" />. Be aware that this will change set the color to all the elements of the animation.
2. For more control over the different layers and for users without Adobe After Effects we recommend using the Lottie editor.
3. If you do have Adobe After Effects, you can use the project included in the pack to change colors and stroke of the animation with the controllers. After editing, you have to use a plugin called Bodymovin to export to a Lottie animation.
4. The quickest and possibly the easiest way to change the colors of animation would be to use a filter. Please be aware that this only works on animations that are monochrome (e-commerce pack for example). To accomplish this choose a hexadecimal target color and then use this codepen to generate the correct filter. Copy the generated filter and apply it to a CSS class on the <div> containing the animation.

No, the two biggest differences between Lottie and GIFs are that Lottie animations are rendered as SVGs (Scalable Vector Graphics) and their file size is much smaller (4KB vs 206KB for the same animation!). Additionally with Lottie we can introduce various different ways to interact with them.