Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with bodymovin JS and renders them natively in both Reactive Web or Mobile apps!

Installation

After installing Lottie Animations Library in the Development Stage, inside your app reference the Animation Block and the client actions of choice to manipulate the animation.

Usage

1. Got to https://lottiefiles.com/ and download the Lottie JSON file of an animation of your choice.

2. Inside Service Studio, import the JSON file as a Resource inside the Data tab. Set the Deploy Action parameter to Deploy to Target Directory

3. Drag the Animation Block to the screen.

• Set the ContainerId input parameter with the Id of an empty container (the animation will be rendered inside this empty container - don't forget to give the empty container a name!)
• Set the Path input parameter with the path of the JSON file that was imported as a Resource
• Set the Loop input parameter to True or False, depending on whether the animation needs to be played in a loop
• Set the AutoPlay input parameter to True or False, depending on whether the animation needs to be auto-played
• Set the Name input parameter with a name for your animation (this name is needed for future reference if the animation is needed to be manipulated using one of the client actions)

4. Optional: Create handlers for Complete, LoopComplete or Ready events of the Animation Block, if some logic needs to be executed during these events.