Lottie plugin for Keyshape
After installing the plugin, it is possible to open Lottie animation files in Keyshape for editing. It is also possible to export Lottie animation files.
- Go to Releases and download Lottie-format.keyshapeplugin
- Double-click the downloaded Lottie-format.keyshapeplugin to install it in Keyshape
The plugin can be updated with the same procedure: download the latest release and install it.
Importing Lottie animations
After installation, just use the File > Open menu command in Keyshape to open Lottie files. Lottie files have a .json file suffix.
Basic Lottie features are imported successfully, but there are few limitations:
- path trimming is mapped to stroke dash array animation
- path trimming supports only simple start to end animations
- separated position animations are not supported
- gradient animations are not supported
- size animations are not supported
- repeater is not supported
- expressions are not supported
- effects are not supported
- camera is not supported
- frame rates are rounded to integer numbers
- only one fill and stroke per object
- no support for inverted masks
- only "add" mask mode is supported, no "intersect" etc. mask modes
Exporting Lottie animations
After installation, the Lottie export option can be found in the export dialog. Lottie animations are exported to a single JSON file.
Exporting has few limitations:
- only top level bitmap images are supported (without width and height animations)
- blending, curved motion paths and orient along path are supported only at the top level objects
- stroke dashing supports only one dash and gap
- gradients don't support the alpha component
- stroke and fill animations don't support "none" or gradient values
- rounded rectangles support only X radius, Y radius is ignored
- skew X and Y are not supported at the top level objects
- only skew X or skew Y can be set or animated, not both
- repeating individual properties is not supported
- filters are not supported
- blending isolation is not supported
- text is converted to paths
- symbols create duplicate code, which can create large files
- clipping paths are treated as masks
- masks can only be under top level objects
- only rects, ellipses and text are supported under masks
- only opacity animations are supported in masks and clipping paths
- masks don't support gradients
- masks and clipping paths cannot be used together under one element
Previewing Lottie animations
Keyshape can preview Lottie animations on web browsers with the Lottie-web player. Select the Lottie-web option under the preview options and then press the Preview button to view the animation.
Exported Lottie animations can also be tested on browsers and native Android and iOS devices with the LottieFiles previewer.
- Introduction to Lottie
- Lottie-iOS - iOS and macOS
- Lottie React Native
- LottieFiles - a collection of Lottie animations
- LottieFiles Previewer
- Third-party Lottie players for Xamarin, Titanium, Vue, React, Angular, etc.
MIT License, see the LICENSE file for details.