I came across Lottie for the first time in my first OutSystems Mobile project. We had to put some animations in the application, and I had no idea how we could do that. Talking to the design team, we decided that Lottie files were the solution.
Here I will cover:
- What is a Lottie Animation
- Why use Lottie in your projects
- How you can use Lottie in OutSystems
So Let’s start at the beginning.
What is a Lottie?
A Lottie animation is a lightweight JSON-based animation file format composed completely of code, which is why it quickly loads to apps and websites. It enables designers to ship animations on any platform. You can use it on your web or mobile applications, having the advantage of being small files that can scale up or down without pixelation. It’s a digital description of all the shapes, colors, and movements of an animation. And I can tell you that they deliver when it comes to shipping animations with quality on OutSystems.
Why Lottie?
(Source: LottieFiles)
- You can use Lottie files on Traditional Web, React, and Mobile.
- It is resolution-independent and scalable at run-time.
- Its file size is super small (If a PNG is a T-Rex, and a GIF is an elephant, then a Lottie is a puppy.)
- Exposes animation elements and parameters to use as targeting elements to add interactivity and manipulate at run-time.
How can I use a Lottie in OutSystems?
1. Get the Lottie Animations component at Forge
To use the Lottie Files in OutSystems it is necessary to get the Lottie component from Forge. Here we will be showing the reactive component, which you can also use for Mobile. But note that there is also a Traditional Web component.
2. Get the JSON
Assuming you don’t have any Lottie animations you can download Lottie animations from the lottiefiles community.
When downloading the JSON file, it is possible to edit some parameters. Parameters such as animation speed, background color, layer colors among others. We can download this file in different formats. For our purpose, we will download the “Lottie JSON” format.
3. Add the file to OutSystems
The next step is to go to Service Studio and in Resources import the desired JSON file. After importing, it is important to change the Deploy Action field to the “Deploy to Target Directory” option.
4. Configure the animation
For Lottie animation to work in Outsystems you will need to:
a. Consume Web Block “Animation” of LottieAnimations.
b. Add a Container to the page and give it a name. In this example, we named it StayHome.
c. After adding the file to OutSystems we will need to configure how we want the animation to work and what actions should activate it. To this, you must add the Web Block “Animation”. You will notice that there are 2 mandatory fields, the ContainerId, and the Path. Here are the properties we have to work with:
- ContainerId: the DOM element on which to render the animation
- Path: the path to the JSON file which holds the animation data
- Loop: specify whether the animation needs to be a loop
- AutoPlay: specify whether the animation should play as soon as it’s ready
- Renderer: the format of the animation to set the renderer (SVG / canvas / HTML)
- Name: animation name for future reference. In case you want to use the Lottie Actions you will need to set the Name of the animation.
After Following the steps above you publish the module and you will have the animation available in your application. But, you may want specific actions, behaviors, and moments when you want to use your animation (e.g. after clicking on a button).
5. More Animation Options
We have a few more animation options that can make Lottie’s animation a lot more interesting. For example, we can change the speed of the animation, stop or pause the animation, play it when we want, or change the direction.
- GoToAndPlay: set direction of the animation. Plays the animation from the given point. (Could not reproduce. If anyone knows how to do it, please write in the comment)
- GoToAndStop: set direction of the animation. Moves the animation with the specified name to the given marker and stops. (Could not reproduce. If anyone knows how to do it, please write in the comment)
- Pause: stops the animation. Has parameter name to target a specific animation. If not set it will run for all animations.
- Play: plays the animation. Has parameter name to target a specific animation. If not set it will run for all animations.
- SetDirection: set direction of the animation. There is a boolean input to set if it is forward or not. Has parameter name to target a specific animation. If not set it will run for all animations.
- SetSpeed: set the speed for the animation. 1 is normal speed. Has parameter name to target a specific animation. If not set it will run for all animations.
- Stop: stops the animation. Has parameter name to target a specific animation. If not set it will run for all animations.
Here I will present 2 examples, “Play” and “SetDirection”. To be able to use Lottie Actions, it is necessary to give the animation a name, here was given the name StaySafeAnimation. After this step, you have to choose the action you want to perform and put StaySafeAnimation in the “Name” field of the desired action. Here, as we can see, it was necessary for the Play and Set Direction actions to fill in the Name field and for the direction, you need to put in IsForward if it is True or False.
You can also implement events, as the animation has:
- Completed: when it completes the animation. Event used only when the “Loop” attribute is False
- LoopComplete: at the end of each loop the event is launched. Event used only when the “Loop” attribute is True
- Ready: when ready to be played, this event is launched
Conclusion
Let’s be honest, animation on an application makes it more exciting and appealing. Having an application with or without an animation can be the difference between the end-user giving the application a chance or not.
Thus, it cannot be an aspect of the application that can be neglected or considered superficial or secondary. Using Lottie animation will not just help you make your product unique, it will give your users an improved user experience (UX).
As you could see, it is quite straightforward to use Lottie in OutSystems. I hope in the next projects, together with the UX / UI team you will be able to create fantastic applications full of animations.
Sources:
Note: components in the forge with examples:
Visual Codify 