Interactions

Understanding Interactions

In the last chapter, we learned about states in Lottielab Interactivity. However, states on their own aren't very useful―what makes interactivity exciting is that the user can interact with the Lottie and therefore cause changes in those states. This is where interactions come in.

Every interaction is specific to a state. Some of them are also layer-triggered (for example, click on a specific layer). You can think of it as a rule that describes what should happen in response to some event. For example, an interaction on the state "Normal" might say: "when the user clicks the 'Button' layer, change to 'Clicked' state".

Some interactions don't correspond to a user-triggered event. For example, On finished and After delay happen automatically in response to things internal to the Lottie, for example, when a state finishes playing or some amount of time passes.

Don't worry if this sounds too complex; we'll start from the basics.

Viewing, adding and removing interactions

Since interactions are specific to a state and layer, you can see them in the State properties panel on the right, after selecting a state (and/or layer) in Interactivity mode:

• To add a new interaction to the state: click on the plus button in the top right.

• To remove an interaction: click on the minus button at the right of the interaction you want to delete.

• To edit an interaction: click it. The interaction editor will open on the left. (See below.)

Layer-triggered interactions

The picture above shows the appearance of the state properties panel if no layer is selected.

Selecting a layer and a state will allow you to add mouse interactions targeting only that specific layer. In that case, the state list on the left will show layers that have been used as triggers within each state, and clicking them will show you interactions specific to that state and layer in the right panel. (See picture below.)

In turn, deselecting the layer and clicking the top-level state will show only the global (not layer-triggered interactions) in the right panel.

Anatomy of an Interaction

Interactions are set up in the Interaction editor, pictured below:

At the top, you can select one of the many events that should trigger this interaction (in the example picture, "After finished"). After opening the event type dropdown, use the tooltips provided by the editor to get a more detailed explanations of what the various events mean.

The most important option after that is the destination state (in the example picture, "Hovered"). This simply defines which state the Lottie should transition to when the interaction happens.

The example at the top, therefore, reads the following: "In state 'To Hovered', when the 'Finished' event occurs (when playback finishes), transition to state 'Hovered'."

Playhead position

The middle-right option ("Beginning" in the picture above) controls what happens to the playhead after a transition happens. There are two options:

• Beginning: after the transition, the playhead moves to the beginning of the destination state and continues from there. The picture below illustrates the transition, along with the old and new playhead positions:

  
• Transfer: after the transition, the playhead moves to the position in the new state that is at the same percentage as it was in the initial state. For example, if the playhead was 25% of the way through the first state's segment when the interaction happened, it will transfer to exactly 25% of the way through the new state's segment. This can be useful if you want to match two animations (for example, switch between two walk cycles) and avoid time discontinuities.

  

Transition type

The middle-left option ("Blend" in the picture above) is the Transition type. The most straightforward option is Instant. With Instant, your Lottie instantly jumps into the new state and continues from there, as soon as the trigger event happens.

However, this might not always be what you want. If both of your states are animated, the abrupt transition between them might look jarring. Even if you set them up with the Transfer option from above, you will be able to keep the timing, but the instant change will still visually happen.

This is where the other option, Blend, comes into play. Blend allows you to smoothly blend the look of the Lottie between the old and new states over a specified duration. This allows you to transition between any two states without manually creating transitions or worrying about timing and instant visual switches.

The bottom row of options is specific to this Blend transition. The bottom-right option controls how long the blending transition should last. The bottom-left option allows easing to be applied to the transition for an even smoother feel. Experiment with the different values to get a feeling of how they work, or choose Custom and specify a custom easing curve for most control.

The Lottie above uses the Blend transition type to ensure all possible transitions are smooth. Try stress-testing it by moving the mouse in and out quickly, clicking many times, clicking and then quickly moving the mouse outside, etc. Notice how there are no abrupt transitions.

This is the same Lottie with all transitions set to Instant. Notice how performing the same stress test results in quick, jarring transitions that break the flow of the animation.

Custom events

One of the options in the event type dropdown is Custom event. This is a powerful feature that allows you to break out of the predefined, mouse-centered events that Lottielab exposes, and create a Lottie that readily responds to events that are specific to your app.

For example, if you are creating an onboarding animation, you might create Custom event interactions and type in event names such as step_1_complete, step_2_complete, loading_start and finished. Afterwards, you or a developer can load the resulting Lottie and trigger these events via code as the user progresses through the onboarding. Your Lottie will then seamlessly respond to them.

To test out custom events, click the Preview button at the top right of the editor. On the resulting page, you'll be able to click on your custom event names in the State Viewer on the right to trigger them manually and see how the Lottie responds to them.

Read more about this feature in the Lottielab Player documentation.

Mappings

Finally, we come to the trickiest of all supported interactions―the mapping.

Mappings are not a traditional interaction, as they don't cause the state to change. They are, instead, designed to provide continuous control over some parameter based on some user input. The Lottielab Player runtime provides mouse-centered user inputs, such as mouse.progress.x and mouse.progress.y, to name a few. The parameters that can be controlled based on these inputs are playhead, speed or blending.

The mapping has two components:

• The input determines what gets mapped. You can choose among two event types in the event dropdown (see above) to control the input:

  • Choose a "Follow cursor" event type in the event dropdown to create a mapping that uses the mouse position as a source. Several options are available―using the mouse X, mouse Y, mouse distance or mouse angle to a point as inputs.

  • Choose a "Custom formula" mapping to get raw access to the mapping engine from Lottielab Player and use the result of evaluating custom formula as the input. This is an advanced option. For more details, see our section on Formulas.

• The output determines to what parameter the input will control. There are several options:

  • Time (progress): The input will control the position of the playhead directly. For example, if Follow cursor, Mouse X is selected, the greater the mouse X position (as the mouse goes to the right), the greater the playhead time within the state's segment.

  • Playback speed: The input will control the speed of playback. For example, if Follow cursor, Mouse X is selected, the greater the mouse X position (as the mouse goes to the right), the faster the state will play.

  • Blend: Smoothly blends between this and some other selected state based on the input. When the input is at the minimum (0.0), the current state is displayed. When the input is at its maximum (1.0), the other state is displayed. All values in between show a blend between two states. For example, if Follow cursor, Mouse X is selected, putting the mouse right at the middle of the Lottie horizontally will cause the Lottie to be a 50-50 blend between the two states.

The Lottie above is an example of using a Mouse Y mapping that targets Blend between two states. The states in question are a normal- and evil-looking animated capybara. As you move the mouse vertically through the Lottie, the view transitions smoothly between the two versions of the capybara.