Today, animations are present in almost every product that can be viewed on a screen. These animations are used to make the users experience richer and as a means of catching the users attention. In addition to using animations, pairing animations with interactivity is even more powerful as it gives the user the ability to either use the cursor or keyboard to interact with the animations and this in turn breathes life into an otherwise passive webpage. This article will aim to highlight some use cases and inspiration on adding interactivity to your web pages, as well as the technology required and how to use them with a focus on Lottie, a popular web animation technology and the Lottie Interactivity library.
What is a Lottie?
For those of you who have not heard of Lottie, a Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. I would suggest checking out this page on What is Lottie to help better understand why the Lottie should be your go-to format for implementing animation.
Interactivity with Lottie
Lottie animations are generally used for micro animations, or as hero section animations where animated illustrations are used. Thousands of free to use animations can be found on LottieFiles. These animations can then be paired with the Lottie Interactivity library or any other technology that allows building in interactivity to a web element such as GreenSock. Using these libraries require a certain amount of JavaScript knowledge. For those of you who are part of the No Code Era, WebFlow provides tutorials and guides on how to create Interactivity with Lottie on Webflow sites without any coding. The page below shows a hero section that is a Lottie animation consisting of mainly text built and designed by the awesome folks at Olvy HQ.
Scroll on this to see the interactive animations on this site in action.
Technology to make it happen
Lottie Interactivity library
This library is a small Vanilla JS library that allows a developer to add in a variety of different interactivity. The pre-requisite being familiarity with using a Lottie and implementing it on a website using the Lottie Web Player.
- Installation
Copy the following script and paste it into the bottom of your HTML body element as you would a JavaScript library:
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
Add a Lottie into your HTML DOM and place it where needed as follows:
<lottie-player id="firstLottie" src="https://assets2.lottiefiles.com/packages/lf20_i9mxcD.json" style="width:400px; height: 400px;">"></lottie-player>
- Configuration
Add the following script right below the first script we pasted into the HTML body. The script below shows the setup and configuration of the interactivity. It essentially says to the web page to make an element with the ID "firstLottie" seek or move frames while scrolling when the visibility of the element is between 0 to 1 ( basically 0–100%) and it should move from frame 0 to 100.
<script>
LottieInteractivity.create({
mode: 'scroll',
player: '#firstLottie',
actions: [
{
visibility: [0,1],
type: 'seek',
frames: [0, 100],
},
],
});
</script>
A demo of a scroll interactive Lottie.
A Lottie animation can be synced to move each frame of the animation as the user scrolls the page. The animation progresses as you scroll and this is the configuration provided in the article as well. The configuration can be changed to scroll relative to another element on the web page, to move the animation with scroll and then continuously loop from a given frame, play on hover, as well as move the animation forward when the mouse cursor moves across the animation itself.
For an in-depth and detailed guide with demos click here.
Here's another great use of interactivity that can be seen on The Guardian where the team used Lottie and Interactivity for story telling.
Other than storytelling or animated hero sections on webpages, on-hover and on-click interactions make for great micro interactions too. A Lottie animation could be used in place of a button or smaller elements and when the cursor moves on top of the element, it can be activated. Using the LottieFiles Web-Player you can simply toggle off the loop option if needed and select the hover option and copy paste in the code. Have a look at this page here. A brilliant example of this was showcased by Twitter where the like button would change and animate on clicking it if a specific hashtag was present in the tweet.
Other notable technologies
GreenSock
GreenSock is an interactivity library built from JavaScript. The library itself is much heavier than the Lottie interactivity library however it does current have a lot more complex features baked into it. Using GreenSock requires some knowledge of animations and JavaScript. A simple demo of using GreenSock together with Lottie to sync the Lottie with scroll and also adding smooth scrolling to it can be found here. This is a CodePen demo created by Chris Gannon. The GitHub repo with the source code can be found here.
Community contribution
Another open source Lottie interactivity library created by Samuel Osborne which supports play animation on show, play on hover, and simple interactivity great for microanimations. You can have a look at the GitHub repo here.
#BuiltWithLottie
Be creative with what Lottie has made possible and share with us what you build. Be it Twitter, Facebook, LinkedIn or Instagram, use the tag #BuiltWithLottie and show off your creative projects.
