Multi-Element Animation with Claude

Hello! In our last lesson, you created an excellent visual blueprint for a title sequence by mapping out the key states in Figma. This storyboard is the foundation for everything we'll do next.

Today, we will translate that static plan into dynamic motion. You'll learn how to take your storyboard and instruct Claude to generate the distinct animations for each element in your scene. We won't worry about timing them perfectly just yet; the goal is to create the individual building blocks of movement for your line, title, and subtitle.

By the end of this lesson, you will be able to prompt Claude to create distinct animations for multiple elements within the same scene, effectively directing the AI to build the component parts of your final sequence.

1. The Principle: Deconstruct to Animate

Your background in systems thinking and journey mapping is highly relevant here. Just as you deconstruct a user's journey into individual steps, we will deconstruct our animation into individual movements. We'll create the animation for the line, then the title, and then the subtitle, treating each as a separate task for Claude.

This approach of breaking down a design into logical, animatable parts is a powerful workflow when working with AI.

As the article highlights, the core insight is to treat your design as a composite of individual parts. By prompting for animations on a part-by-part basis, you maintain control and can build complexity incrementally.

2. Prompting for Individual Animations

Let's assume you have the static scene set up in VS Code from our earlier lessons. You have an index.html file and a style.css file. The HTML contains your three elements with the IDs #line, #title, and #subtitle.

Now, let's write the prompts to animate each one based on your storyboard.

Prompt 1: Animating the Line

Your storyboard's second state shows the line appearing, drawn from the center outwards. We need to translate this visual goal into a clear instruction for Claude.

Here is an effective prompt:

"Given the existing HTML and CSS, create a CSS @keyframes animation named drawLine. This animation should make the element with the ID #line scale horizontally from 0% to 100%, with the transformation originating from the center. Apply this animation to the #line element so it runs once with a duration of 1 second and an ease-out timing function."

Let's break down why this prompt works:

• Context: It starts by referencing the existing code (Given the existing HTML and CSS...).
• Target: It clearly identifies the element to be animated (...the element with the ID #line).
• Action & Naming: It specifies the creation of a named animation (...create a CSS @keyframes animation named drawLine).
• Description of Motion: It describes the visual effect in detail (...scale horizontally from 0% to 100%, with the transformation originating from the center).
• Application: It tells Claude how to apply the animation (...runs once with a duration of 1 second...).

Prompt 2 & 3: Animating the Text

Your storyboard shows the title and subtitle fading into view. Since the motion is identical, we can be efficient.

Here's the prompt for the title:

"Next, create another @keyframes animation named fadeIn. This animation should transition an element's opacity from 0 to 1. Apply this fadeIn animation to the #title element so it runs once with a duration of 1.5 seconds."

And for the subtitle, we can simply ask Claude to reuse the animation we just defined:

"Now, apply the same fadeIn animation to the #subtitle element, also with a duration of 1.5 seconds."

By prompting this way, you end up with two @keyframes rules (drawLine and fadeIn) and three CSS rules that apply these animations to your three elements. If you were to run this code now, all three animations would start at the exact same time. It would look like a jumble, but that's expected! We have successfully created the individual movements, and in the next lesson, we will orchestrate them.

3. Prompting for Interactive Animations

So far, our animations are independent. But what if you want animations that react to each other? You can also describe these relationships in a single, more complex prompt. Your experience in describing interaction design will be useful here.

This video demonstrates how to prompt for a "spotlight" effect where one element's animation influences the others.

The key is to describe the scene from a storyteller's perspective. Instead of just "Animate A," you're explaining, "When A does this, I want B and C to do that." This allows you to create much richer and more dynamic sequences directly from your prompts.

4. Your Turn: Write the Prompts

Now it's time to practice translating your visual plan into instructions for Claude.

Your Task:
Review the 5-state storyboard you created in the previous lesson for the title sequence. Based on that visual plan, write down the series of prompts you would give to Claude to generate the three separate animations for the #line, #title, and #subtitle.

You can structure this in two ways:

1. Separate Prompts: Write one distinct prompt for each of the three elements, similar to our first example.
2. Combined Prompt: Try writing a single, descriptive prompt that explains the entire sequence of individual animations, similar to the "spotlight" example.

There's no single right answer. The goal is to practice translating your visual storyboard into clear, specific, natural-language instructions that an AI can follow. Type your prompts in a text editor or notebook.

Conclusion

In this lesson, you've learned a crucial skill: directing an AI to animate the individual components of a larger scene. By deconstructing your design and writing targeted prompts, you can efficiently generate all the building blocks of motion you need.

Key Takeaways:

• Deconstruct your design into logically named parts before animating.
• Write clear, specific prompts for each element, defining the target, the desired motion, and the animation parameters.
• You can create animations for elements one by one or write a single, descriptive prompt that explains how multiple elements should animate in relation to each other.
• At this stage, all generated animations will start simultaneously; orchestration is the next step.

In our next lesson, we will solve the timing problem. You will learn about the animation-delay property in CSS, which is the key to orchestrating your individual animations into the polished, perfectly timed sequence you envisioned in your storyboard.