Storyline: AI JavaScript Animations

When Your Appliances Threaten Mutiny… You Make a Storyline Slide About It

Or, at least that's what I did. For this week’s Articulate E-Learning Heroes Challenge, I decided to test-drive the AI JavaScript editor for entrance animations, exit animations, and even a motion path. Every single animation on the slide was generated solely through the AI Assistant - zero manual timeline dragging or animation creation. (My timeline did not love this choice. More on that soon.)

Why this topic? Well… recently my appliances staged what can only be described as a coordinated uprising. A few tried to turn on unattended, my smoke detectors decided they were done with their earthly duties, and suddenly I found myself Googling “how do I not burn my house down?” Okay, that may be a little bit overdramatic, but until my new appliances come my oven is sitting in the middle of my kitchen to so I reach the plug when I need to use it. It cannot be trusted left unattended.

Fun fact I absolutely did not know: smoke detector placement is VERY specific, especially with pitched ceilings. My house is… “creatively shaped,” so down the rabbit hole I went. That inspired this simple demo slide showing ideal placement for detectors on a vaulted or angled ceiling. I’m planning to expand the project with more safety tips, mostly because no one ever taught me any of this and apparently I’ve just been trusting the ONE detector that came with the house like a fool.

Here is the slide I created:

Two things I learned (so you don’t repeat my chaos):

Set your timeline longer before you start.

Storyline defaults to a 5-second timeline. I, apparently, also default to forgetting that fact. So there I was, prompting the AI Assistant for a chain of animations, one after another, only to discover none of them were appearing. I kept asking the AI Assitant to correct this, assuming it was the problem. Spoiler: it was not. My timeline simply wasn’t long enough to contain the animations. (I was the problem).

Was this key information in the tutorial I watched two days ago?

Yes.

Did I immediately forget it when starting this slide today?

Also yes.

In my defense, in "preview" mode the timeline isn't visible, and I was so wrapped up in experimenting with the prompts that it was a bit of an "out of sight out of mind" situation. Luckily I only spent about 5 minutes in this fruitless endeavor before face palming when realizing my mistake.

AI-generated animations don’t show up on your timeline.

This isn’t exactly a “lesson learned,” but it’s definitely something to keep in mind. Animations created with the AI Assistant only appear in Preview mode - not on the timeline. So if you’re planning on future edits or need more detailed control, you might want to build animations manually.

That said… the AI Assistant is actually really responsive for quick tweaks. I noticed two animations were too close together, told it to add two seconds between them, and it did. So if you just need polished entrances or smooth transitions without fussing with the timeline, this tool is chef’s kiss.

Final Thoughts

This was genuinely fun to experiment with, and I’ll definitely use the AI JavaScript editor again when I want simple, sleek animations without manually keyframing every element. The prompting is easy, the rendering is fast, and the results look great, as long as you give yourself enough timeline runway first.

Check out the video below to see the animations in action with some of my commentary.

I would also love to know... did you know smoke detector placement was this specific?

Or are you looking around at placements a bit differently after reading this?