Manual

The fundamentals of using Slider Revolution.

Search
Generic filters

How to Make Interactive Lottie Animations

The Lottie addon for Slider Revolution gives you 5 ways to drive your animations with user interaction. Learn how to use them in this guide.

Table of Contents

Introduction

By default, when you add a Lottie animation layer to your module it will automatically start playing as soon as it appears on the canvas. However, by using the Interactivity settings in the Lottie addon for Slider Revolution you can instead setup animation playback to be controlled by user interaction, making for even more engaging and interesting website content.

You can activate user driven interaction by selecting a Lottie animation layer you’ve created, going to its Layer Options tab, then the Lottie sub-section, and choosing an option from the Interaction dropdown in the Interactivity panel.

There are five interactivity types available to choose from: Click, Hover, Morph, Mouse Move and Scroll.

In this guide we’ll step through how to use each one of the five types of interaction control.

Note: If you’re new to the Lottie addon we recommend you start with the Lottie Addon Quick Start and Extra Setup guides before coming back here to learn about interactivity.

Click Interaction

When you select the Click option from a Lottie layer’s Interaction dropdown, the animation will not play until the user clicks somewhere on the area of the animation.

Once clicked, the animation will play through until its end, and will also repeat if Endless Loop is active under the Lottie Settings panel.

Hover Interaction

The Hover interaction option triggers the animation when the mouse enters the animation’s area, or if it’s tapped on a touch screen.

As with the Click option, it will also repeat if Endless Loop is active.

Morph Interaction

With the Morph interaction, when the mouse enters the animation’s area it will start playing, and when the mouse leaves the animation’s area it will play backwards from that point.

Regardless of whether or not Endless Loop is active, the animation will play only once and then stop, even if the mouse stays in the animation’s area.

Mouse Move Interaction

With the Mouse Move interaction, moving the mouse horizontally over the animation’s area triggers the animation. Moving the mouse to the right advances the animation, and moving it to the left rewinds the animation. Moving the mouse vertically has no effect.

Unlike the Click and Hover interaction types, when you select Mouse Move some extra options will become available for you to configure:

The Ease Speed option controls the relationship between the speed the mouse is moving and the rate of animation playback. This allows playback of the animation to be smoothed out.

The value can be set anywhere between 0, for no smoothing, and 0.9, for maximum smoothing.

If the Continue Playing option is toggled to ON and the mouse leaves the animation’s area, the animation will carry on playing where it left off.

Scroll Interaction

The Scroll option allows you to tie playback of an animation to mouse / page scrolling.

After selecting this option nothing will happen out of the box. To make the interaction work you need to add one or more scroll Actions, and decide on the specifics of how you want those actions to be triggered by scrolling.

Scroll actions give you fine-grain control over the playback of your animation. By combining multiple actions you can create sequences where the animation stops, plays and loops at various points during scrolling.

For example, when a user begins scrolling you might have the animation begin its playback, then part way through have it stop for a moment, then loop a portion of the animation repeatedly.

Note: When you choose the Scroll interaction option Slider Revolution will automatically set your module timeline to be scroll driven as well. Additionally, the module will be set to stay fixed in place while the animations are being scrolled through.

The Three Scroll Actions

There are three actions you can use to drive your animations via scroll interaction: Seek, Loop and Stop.

Let’s have a quick overview of what each of these actions does.

Seek

The Seek action advances the animation when the mouse / page is scrolled down, and rewinds it when the mouse / page is scrolled up.

If all you want to do is have your animation play from start to finish in time with mouse scrolling, just add this action with default settings and you’re good to go.

Loop

The Loop action loops the animation repeatedly between specified frames.

Stop

The Stop action stops the animation at a specified frame.

How to Add and Remove Actions

To add an action click either the Seek, Loop or Stop buttons to the right of the Add Action label:

Once added the action will look like this:

You can add multiple actions and they will appear one stacked on top of the other:

Clicking the play button at the top of an action allows you to preview the effect that action will have on the animation:

To remove an action click the “X” button on its right side:

Frames and Progress

Every action has both Frames and Progress fields, and configuring them is key to setting up interesting scroll interaction sequences. These options are responsible for controlling exactly what each action will do, and when.

The Frames fields control what effect an action will have.

And the Progress fields determine when an action takes effect.

Frames

An action’s Frames fields represent which frames of the animation it should loop through, stop at or seek through. The first field sets the Action Start Frame and the second field sets the Action End Frame.

An example of how this might work is if you add a Loop action and set its Action Start Frame and Action End Frame to 45 and 60 respectively.

With these Frames settings, when the action is active, the animation will repeatedly loop through frames 45 to 60.

In the case of the Seek action, the Frames fields control the range of frames the animation will advance or rewind through during scrolling, when the action is active.

And with the Stop action there is only one Frames field, the Action Start Frame. This sets which frame the animation will stop at when the action is active.

You will have noticed that in each description of how an action’s Frames settings work, we’ve stipulated that these are the effects when the action is active.

And the way you determine when an action is active is through its Progress fields.

Progress

An action’s Progress fields correspond with how far through the possible range of scrolling a user is, where 0 is before scrolling has begun and 1 is when scrolling is complete. A value of 0.5 would represent having scrolled halfway through, 0.25 a quarter way through, 0.75 three quarters through, and so on.

The values entered into an action’s Progress fields determine when it will be active. The first field sets the Scroll Progress Start point, when the action takes effect, and the second sets the Scroll Progress End point, when the action stops having an effect.

For example, if you add a loop action and set its Scroll Progress Start and Scroll Progress End fields to 0.25 and 0.5 respectively, the animation will start looping when the user has scrolled a quarter of the way through, and stop looping once they have scrolled half way through:

How Frames and Progress Settings Work Together

In our section above on Frames settings we talked about an example Loop action set to loop between frames 45 to 60.

If we combined this with the example of setting Progress fields to 0.25 and 0.5 we would have an animation that repeatedly loops between frames 45 to 60 as long as the scroll progress is between a quarter and half way through.

So to recap: For any action, use its Frames fields to control how the action takes effect, and its Progress fields to control when it has that effect.

Combining Multiple Actions

You can add as many actions to your scroll interaction as you like, but the key to combining them successfully is how you configure their Progress fields.

When you first add an action its Progress fields will default to values of 0 and 1, meaning it will be active throughout the entire duration of scrolling.

This is all good if you have just one action, but if you have multiple actions you don’t want them all trying to be active at the same time. Rather, you want them to activate in sequence, one after the other.

To have your actions run in sequence you should alter their Progress field values accordingly.

For example, to change from one action to another half way through scrolling, the first action’s Progress fields should be set to 0 and 0.5, then the second action’s fields should be set to 0.5 and 1.

What you should not do is have any action active at the same time as another.

For example, if your first action is active from 0 to 0.5, the second action should start no earlier than 0.5. If it were set to start at, say, 0.4, it would be trying to control the animation at the same time as the first action, causing undesired results.

You can use as many actions as you like, they can be added in any order, and they can be stacked in any order in the interface, as long as you configure their progress fields so each one is active at a different point during scrolling.

Ease Speed

Now that you understand how scroll actions work, there’s only one more scroll interaction option to be aware of, and that’s Ease Speed.

This option works in essentially the same way as the Mouse Move option of the same name we described earlier in the guide, but in this case controls the relationship between the speed of mouse / page scrolling and the rate of animation playback. This allows playback of the animation to be smoothed out.

The value can be set anywhere between 0, for no smoothing, and 0.9, for maximum smoothing.

Wrapping up

Now you know all about how to create interactive animations using the Lottie Addon for Slider Revolution. Have fun putting this knowledge to work and making interesting and enjoyable content for your website visitors.

How to Make Interactive Lottie Animations

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.