Intro to Interactivity
A guide on getting started with creating Interactive Lotties using Lottielab.
Last updated
A guide on getting started with creating Interactive Lotties using Lottielab.
Last updated
Imagine a simple light switch. This switch can be in either of two states: "on" and "off". Pressing the switch will change its state: if the switch was in the "off" state, pressing it will change its state to "on", and vice versa.
This switch is a type of simple state machine. Lottielab interactivity is based on the same concept: your Lottie can be in one of a number of states that you define.
To make things simple, we've made each state correspond to a time segment of your Lottie's animation.
For example, you can create a light switch animation that switches on from beginning until time 1.0s, and then switches off from time 1.0s until the end. Then, you can start adding interactive behavior to this light switch by making these two segments correspond to your "On" and "Off" states, like in the picture below:
Of course, states are not very useful by themselves. We also need rules that govern how the Lottie's state changes. For example, this on/off switch might have a rule like this: if the Lottie is in state "On" and the user clicks the Lottie, switch to state "Off". We call these rules interactions.
Here's how this simple interaction might look in Lottielab:
Don't worry if this looks overwhelming; focus on the three most important pieces of information on the left: the trigger event ("On click"), the source state ("On") and the destination state ("Off").
Armed with this basic knowledge, we can dive into Lottielab's interactivity tool.
To create an Interactive Lottie, click on the Interactivity tool at the right end of Lottielab's toolbar.
Once you select this tool, the user interface of Lottielab will change, as in the picture below:
In the picture above, you can see:
States panel. This shows the list of all States that you have created. From here, you can add, remove, rename and reorder states. Clicking on a state will select it.
State properties panel. Each state is defined by a time segment, playback properties, and interactions. You can view and change all of this information in the State properties panel on the right.
Timeline with state display. This is very similar to Lottielab's normal timeline, but instead of displaying your keyframes, it shows and allows you to adjust the segments associated with the different states of your Lottie.
To preview your Interactive Lottie and see how it will behave, click the Preview button in the top right of the UI, next to the Export button.
A new tab with your Lottie front-and-center will open. We call this the Playground. Here, you can test your interactions similarly to how they will work when you embed or use your Lottie.
After making a change to your Lottie, wait around 5 seconds, and then refresh the playground to see your changes.
You can also share the link to this page with your teammates, or even publicly (if you set visibility to "Anyone with URL" in the Share dialog). Your recipients will then be able to preview the Lottie or use the Export button to get code embed instructions, links, or download the Lottie.
Besides allowing you to test your Lottie with real interactions, the Playground page provides a state viewer on the right. You can use it to visually see which state your Lottie is in, as well as click any of the states to go directly to that state.
You can use the Interactivity tool in a way that suits you best. However, to help you get started, here is a suggestion on how to approach creating an Interactive Lottie from the ground up.
Animate your Lottie. Think of the interactions that you want your Lottie to support and create them as simple animations.
It might be easiest to design your animation so it showcases all of the interactions in order. For example, if you want to create an interactive Favorite button, you can animate it so that it transitions to clicked and back to non-clicked in order.
Define your states.
Break up your animation into time segments (from/to) that should be available as separate, independent states.
Write down the beginning and end times for each segment if necessary.
Use the + button in the states panel to add states, rename them to a descriptive name, and drag the endpoints in the Timeline so that they match the part of the animation that you want them to display.
Finally, adjust the playback properties on the right-hand side: for example, should your state loop infinitely or should it pause after ending? Should it play in the reverse direction?
Open a preview. Now might be a good time to click on the Preview button in the top right (see next section) and play around with the Lottie in the Playground.
You can click on states manually to see them in action. Make any adjustments necessary.
Add your interactions. For each state, think of how it should respond to any user events, and add them as interactions in the Interactions section of the State properties panel.
Keep testing and previewing your Lottie using the Playground page.
You might need to add additional states at this stage, or adjust the existing ones to achieve your desired interactions.
Embed your Lottie. Click Export and choose a suitable platform at the bottom to get tailored instructions. Or, for a self-serve approach, use one of the links and embed them where you want your Lottie to appear.
Note that Interactive Lotties are experimental, and will play as ordinary Lotties if you don't use Lottielab's own player. See more info on using and embedding Interactive Lotties.
This was a quick guide on how to get started with Lottielab Interactivity. For an in-depth reference guide, refer to one of the following pages:
