States
In-depth reference about the basic building block of Lottielab Interactivity.
Last updated
In-depth reference about the basic building block of Lottielab Interactivity.
Last updated
States live at the heart of Lottielab's interactivity approach. You can think of an Interactive Lottie almost as a collection of other Lottie animations, each of which corresponds to a state.
At each given time, only one state plays. Interactions can then switch and blend between states in response to user behavior. For example, a button might have a Normal and Hover states that look differently. An "on hovered" interaction can cause the Lottie to play one state or the other based on the user's actions.
In Lottielab, a state corresponds to a time segment of the full animation. For example, we might say that a state corresponds to the segment from 0.5s to 1.5s. When our Interactive Lottie is in that state, it will only play the part between 0.5s and 1.5s of the full animation.
Two states can correspond to the same segment. This can be useful, for example, if you want to play a part of the animation in reverse in some cases but not in others. To achieve this, you can create two states with the same segment, but with one set to Reverse (see below). Then, you can transition to one or the other depending on which direction you want your animation to play.
A state can also correspond to a single time moment rather than a segment. If the Start and End times are equal, this technically means that the time segment has a 0 duration. Use this for static states, where there should be no animation.
A state also has a few other associated playback options. Read on for details.
When in Interactivity mode, you can see a list of states at the left of the screen (states list), and at the bottom (timeline). On the right-hand side, you can see the properties of the currently selected state.
In the states list:
To add a state: click on the plus button at the top right.
To delete a state: move your mouse over a state and then click the minus button on the right.
To rename a state: double click it, type the new name, then press Enter.
To reorder states: drag and drop a state to another position in the list.
To change a state or add interactions: click on the state to select it, and then make changes in the State properties window on the right (see below).
In Interactivity mode, the timeline displays states and their time segments instead of keyframes as usual.
Each entry in the timeline corresponds to a state, and the bar on the right of each state visually shows which time segment it corresponds to.
Use the circular handles on either side of the selected segment to adjust the beginning or end, or drag it in the middle to move it around.
Besides the time segment (visible at the top of the picture above), a state can have other associated playback options, located in the State properties section at the bottom of the picture above. From top to bottom, here are the available options:
Looping. This defines how playback will occur for this state. You can choose one of the following options:
Play once: When the Lottie is in this state, the playhead will go from the beginning to the end of its segment once, and then pause.
Nothing will happen automatically afterwards; if you want, you can use an On finished interaction to automatically transition into another state after playback stops. This can be a powerful tool for chaining together animations.
Loop infinitely: When the Lottie is in this state, the playhead will simply loop around the state's time segment.
Loop N times: Like a combination of Play once and Loop infinitely, the playhead will first complete a number of loops (which you type in), and then pause.
Paused: The playhead will never move while the Lottie is in this statsee.
Speed: This allows you to change the speed at which playback proceeds. Setting this to 0.5, for example, will make the playhead twice as slow as normal.
Direction: Allows you to specify that the time segment should play in reverse when the Lottie is in this state.
As you can see in the image above, the state also has associated interactions. Click below to learn more.
Interactions
