Controlling Lottie Playback with Claude and JavaScript

Hello! In our last lesson, you learned the primary workflow for taking a design from Figma and exporting it as a Lottie JSON file using the LottieFiles plugin. This gave you the "asset"—the animation data itself.

Today, we will bring that asset to life. You'll learn how to use Claude to write the JavaScript necessary to load your Lottie file onto a webpage and control its playback. This is where Lottie's true power shines, allowing for the creation of the interactive, responsive animations you see in modern apps and websites.

By the end of this lesson, you will be able to direct Claude to generate the code needed to load and programmatically control a Lottie animation, bridging the gap between your static design asset and a dynamic, interactive experience.

1. The Anatomy of a Lottie Implementation

Before we start prompting Claude, it’s essential to understand the three core components required to get a Lottie animation running on a webpage. Think of it like setting up a scene for a performance:

1. The Performer (The Lottie JSON file): This is the animation data you exported from Figma. It contains all the instructions for shapes, colors, and movement.
2. The Stage (The HTML Container): This is a simple <div> element in your HTML file where the animation will be rendered. It acts as a designated space for your performer.
3. The Director (The lottie-web JavaScript Library): This is the engine that reads your JSON file and "directs" the animation, drawing it onto the "stage."

A small piece of your own JavaScript acts as the glue, telling the Director which Performer to put on which Stage.

The following article from the engineering team at Cowrywise gives a great real-world overview of this exact setup.

As you saw, the lottie.loadAnimation() function is central. It takes an object with several configuration options. The most important ones are:

• container: The HTML element where the animation will live.
• path: The file path to your .json animation file.
• renderer: Almost always 'svg', as it ensures the animation is scalable.
• loop: true or false. Determines if the animation repeats.
• autoplay: true or false. Determines if the animation plays as soon as it's loaded.

2. Prompting Claude for the Basic Setup

Now that you know the recipe, you can direct Claude to cook. Your role is not to write the code yourself, but to provide clear, structured instructions.

Let's imagine you have a file named my-animation.json. Here is how you would ask Claude to create the initial setup:

Prompt for Claude:

"Create a complete HTML file named index.html.

1. Inside the <body>, create a <div> with the ID animation-container.
2. Include the latest version of the lottie-web library from a CDN.
3. Add a <script> block at the end of the <body>.
4. Inside the script, use lottie.loadAnimation to load an animation into the animation-container div.
5. The animation file is located at my-animation.json.
6. Configure the animation to not loop and not autoplay."

This prompt is effective because it's specific. It names the files, IDs, and required behaviors (loop: false, autoplay: false), giving the AI all the information it needs to generate the correct code.

3. Taking Control: Interactive Playback

Loading a static animation is just the first step. The real magic of Lottie lies in controlling it based on user interaction. To do this, we need to save the animation object that lottie.loadAnimation creates and then call methods on it.

const anim = lottie.loadAnimation({
  container: document.getElementById('animation-container'),
  // ... other options
});

// Now we can control it using the 'anim' variable
anim.play();

The following resource is an excellent, practical guide to the most common playback control methods.

From that reading, here are the key control methods you'll use most often:

• anim.play(): Plays the animation from its current position.
• anim.pause(): Pauses the animation at its current position.
• anim.stop(): Stops the animation and rewinds it to frame 0.
• anim.goToAndStop(value, isFrame): Jumps to a specific point and stops. value is the frame number, and isFrame should be set to true. This is perfect for setting an initial state or for creating a "scrubbable" animation linked to a slider.
• anim.playSegments([startFrame, endFrame], force): Plays only a specific portion of the animation. This is the key to creating multi-stage interactions, like a button that animates "on" and then animates "off." The first parameter is an array with the start and end frames.

4. A Practical Prompting Scenario: The Toggle Switch

Let's tie this all together. Imagine you have a Lottie of a toggle switch. The animation from frame 0 to 30 shows it turning "on," and the animation from frame 30 to 60 shows it turning "off." You want to control this with a button.

Your job is to describe this behavior to Claude in plain English.

Prompt for Claude:

"I have a Lottie animation loaded and stored in a variable called anim. I also have an HTML button with the ID toggle-button.

I need you to write the JavaScript to make this an interactive toggle.

• When the page loads, the animation should be paused at frame 0.

• When the user clicks toggle-button for the first time, play the animation from frame 0 to 30 (the 'on' state).
• When they click it a second time, play the animation from frame 30 to 60 (the 'off' state).
• This should continue to alternate on every click."

Deconstructing this prompt:

• You state the context (an animation anim and a button #toggle-button).
• You define the initial state (goToAndStop(0, true)).
• You describe the conditional logic ("first time... second time"). This implies the need for a state-tracking variable (e.g., isToggled).
• You specify the exact actions using the concepts you learned (playSegments([0, 30]) and playSegments([30, 60])).

By providing this level of descriptive detail, you are effectively directing the AI to write the code that brings your interactive vision to life.

Conclusion

You now have the conceptual framework to direct Claude in creating interactive, code-controlled Lottie animations. You understand the necessary HTML and JavaScript setup and, most importantly, the key methods for controlling playback.

Key Takeaways:

• A Lottie implementation requires three parts: the JSON file, an HTML container, and the lottie-web library.
• The lottie.loadAnimation() function initializes the animation and allows you to set properties like loop and autoplay.
• You can create rich interactions by calling methods like playSegments() and goToAndStop() on the animation object, often triggered by user events like clicks.
• Your effectiveness in using Claude depends on your ability to write clear, structured prompts that describe the desired animation behavior in detail.

In our final lesson, we will step back and look at the bigger picture. We'll compare the two animation techniques you've now encountered—CSS animations and Lottie animations—to help you understand the strengths and weaknesses of each, so you can make informed decisions about which tool to use for your future projects.