What you’ll make
One animated slide you can open and a still that teaches the same point.
Which part of the dough should you look at?
A short animation for an online bread class
Say you teach a beginner bread class and want to show how dough rises. Keep the bowl and the starting line still. The dough is the only part that needs to move.
Browser slide
Watch the dough rise past its starting line
- 0–1 sec. The top of the dough lines up with ‘Start.’
- 1–4 sec. The dough rises toward the ‘After’ line while the bowl and labels stay in place.
- 4–8 sec. Hold the finished view for two seconds, then reset.
Handout and reduced motion
Show both levels in one still
- Label ‘Start’ and ‘After’ on the same bowl. Show the dough at the higher line.
- Caption the picture ‘The dough rises above its starting line.’
Before you start
- Bring your outline, a few slides, and the fonts or logo you already use. Write down where you’ll present and how people will get a copy.
- Pick one slide that could show a change. A messy list turning into an organized board is a good place to start.
Pick one thing people should see
Choose one point from your lesson and one change that makes it easier to understand. Write down what should stay still while it happens.
Make just that slide
Open a Claude chat, copy the prompt below, and send it. Attach a sketch or any approved artwork you want to use. If Claude gives you HTML as text, save it as an HTML file and open it in a browser.
Build one animated teaching slide
Use the details I provide in this chat or in my attachments. Make a single editable browser slide that teaches my one sentence. Animate only what helps show the change. Keep key labels visible, add a keyboard-accessible pause control, and hold on the result long enough to read. Make a still with labels and a short caption for print and reduced motion. Give me complete HTML I can save and open. Ask first if you don’t know what moves or what the audience should learn.
Keep the slide and its still
Try the loop, then open the still or print view on its own. Check that both versions make the same point.
I describe the bread bowl, the dough’s starting line, and the higher line it reaches.
The slide might show the dough rising while both marks stay visible. The still can show the bowl at the higher line with both marks labeled.
Say your line while it plays
Talk through two loops at the size people will see. If you run out of time, give the result a longer hold and try your line again.
- Say the takeaway once while the animation plays.
- Pause and resume the slide using the keyboard.
- Open the still on its own and read its labels.
Optional: Make a still for the handout
Export a still of the slide after the change has happened. Put it beside the animated slide and check that both versions make sense with the same line of narration.
Show me three ways to explain this slide
Start with your outline and the slide people get stuck on to choose a visual you can talk through.
I’m presenting to [audience] in [room or call]. Here’s my outline, example slide, and any brand files: [inputs]. The one sentence I want people to remember from this slide is [takeaway]. If my outline gives two competing takeaways, show me both and ask which one I want to teach. Sketch three ways to show the same facts. For each, give me the slide title, where the key labels sit, the one thing that moves, and what the audience should notice at the end. Include a still and a short caption that could carry the same idea on paper. Then give me a one-line takeaway for each remaining slide in the outline. Recommend which of the three sketches to try first, using the audience’s viewing distance and the amount of pointing or narration the layout needs. Mark any facts or artwork I still need to supply.
Make this one slide work in the browser
When your worksheet has a timeline and a still, use them to build the slide and its controls.
Build [chosen sketch] as one browser slide. Use [initial frame, change, result hold, reset timing] and keep the heading and stage labels steady. Add labeled slide navigation where there’s a second slide to visit and a pause control I can reach and use with the keyboard. When I leave and return, the slide should [chosen playback behavior]. If I haven’t picked that behavior, ask before deciding. Use [still, labels, and caption] in print and when reduced motion is enabled. Return editable HTML if you can create it, or give me a complete code block and save instructions. Include the clicks and keys I can use to check both loops, focus, pause, and the static version.
Turn my rehearsal notes into fixes
After rehearsing on your presentation device, share what you saw to decide which timing or layout change to try first.
Here are my notes from two loops, the keyboard pause and return test, and the print and reduced-motion checks: [observations or captures]. My spoken line is [line]. Make a short fix list with the slide, frame or control, observed problem, exact change, and what I should see after the fix. If I run out of time to say the line, suggest which part of the loop can give up time for the result hold. Compare the handout with the spoken takeaway and show any missing stage label or caption. Leave untested device behavior on my rehearsal checklist.
Optional worksheet: Animated slide worksheet
Fill this in as you go. Keep this page open while you work. Reloading it clears your answers.
Troubleshooting
The audience misses the result before the loop resets. How do I fix it?
Leave the finished result up a little longer. Take the extra time out of the move or the reset, then say your line out loud while it plays again.
My PDF shows the opening frame and loses the explanation. What now?
Set the print layout to show your chosen still. Add labels or arrows where people need help following the order. Export again and see if the PDF makes sense with the browser deck closed.