Storyline 360 · JavaScript · GSAP · Designer Handoff
A Healthcare Patient Journey —
Extending Storyline with JavaScript
A five-slide Storyline 360 course built from a professional studio's Adobe Illustrator design files and custom JavaScript template — popup layers, AI-generated narration, GSAP-powered 3D card flips, and an embedded JavaScript word game.
The Brief
A studio-grade designer-to-developer handoff
A digital learning studio provided Adobe Illustrator design files, a Storyline template with custom JavaScript patterns, and a five-slide specification — the kind of designer-to-developer handoff used in professional studio pipelines.
The designs called for interactions Storyline doesn't support natively: CSS-style drop shadows, hover effects, true 3D card flips, and an embedded JavaScript game — plus a ten-step interactive patient journey map with popup layers, visited-state tracking, and AI-generated narration.
My job: deliver a pixel-accurate, fully interactive build matching the studio's design system, with every interactive element constructed as a native Storyline object.
5
Slides · 1 Week
Digital Learning Studio · Healthcare Client
Adobe Illustrator handoff · JS template system
Articulate Storyline 360 · GSAP · ElevenLabs
The Build
Five slides, five interaction patterns
Each slide required a different technique — from native states and layers to runtime-loaded JavaScript libraries.
Click-to-Reveal Introduction
A blurred photo the learner clicks to unblur, which enables course navigation. Blur and shadow effects implemented with JavaScript triggers targeting elements through their accessibility names.
Interactive Journey Map
Ten step buttons with visited-state tracking, popup layers with show/hide logic for underlying content, and category buttons whose selected states respond to the step being viewed.
Audio + Mute System
AI-generated narration (ElevenLabs) on a popup layer, wired to a mute/unmute system driven by a shared IsMuted variable synchronized across slide and layer timelines.
3D Card Flips with GSAP
True perspective card flips using GSAP loaded at runtime — per-card animation locks, pointer-event management so only the visible face receives clicks, and completion tracking reported to Storyline variables.
Tabbed Content Panels
Button-driven panel swapping managed with base-layer state changes — avoiding the click-blocking issues that layer-based approaches introduce.
Embedded JavaScript Game
A Connections-style word game (HTML/CSS/JS with GSAP animations) embedded as a Web Object — folder structure preserved so relative asset paths survive publishing.
Walkthrough
A Guided Tour of the Build
A slide-by-slide walkthrough of the interactions — blur reveal and state persistence, JavaScript hover and shadow effects, AI-generated narration with custom mute controls, GSAP 3D card flips, and the embedded JavaScript connection game.
Storyline Module
Explore the Course
Five slides following a patient's journey through a healthcare visit — from check-in to online access.
Launch Course
Process
From Illustrator to interactive objects
The client required every interactive element to exist as a native Storyline object — no baked-in interactivity inside image exports. That meant reading exact colors, fonts, corner radii, and gradients out of the Illustrator files, then rebuilding each button, circle, and panel natively with full state control (normal, hover, visited, selected, disabled).
Static artwork — backgrounds, photography, headings with gradient text Storyline can't reproduce — was exported as transparent PNGs and positioned to match the source layouts.
Where the design exceeded Storyline's native capabilities, JavaScript triggers filled the gap: drop shadows and hover effects applied through DOM selectors, and GSAP loaded at runtime for the 3D card flip interaction.
Inspect the design files
Exact colors, fonts, corner radii, gradients
Rebuild interactivity natively
Buttons, states, triggers in Storyline
Export static artwork
Backgrounds and imagery as transparent PNGs
Extend with JavaScript
Shadows, hovers, flips beyond native limits
Technical Design
The 3D Card Flip
Storyline has no native 3D flip. This build loads GSAP at runtime, targets each card face in the published DOM, and animates synchronized rotateY transforms — with pointer-event management so only the visible face receives clicks.
// Flip trigger — both faces animate in a synchronized timeline
gsap.set(frontEl, { rotateY: 0, force3D: true });
gsap.set(backEl, { rotateY: -180, force3D: true });
backEl.style.pointerEvents = 'none';
function flipCard() {
if (isAnimating) return;
isAnimating = true;
gsap.timeline({
onComplete: () => {
isAnimating = false;
flipped = !flipped;
// only the visible face is clickable
frontEl.style.pointerEvents = flipped ? 'none' : 'auto';
backEl.style.pointerEvents = flipped ? 'auto' : 'none';
player.SetVar(varName, true); // report to Storyline
}
})
.to(frontEl, { rotateY: flipped ? 0 : 180, duration: 0.6, ease: 'power2.inOut' }, 0)
.to(backEl, { rotateY: flipped ? -180 : 0, duration: 0.6, ease: 'power2.inOut' }, 0);
}A debugging lesson worth documenting: Storyline regenerates data-model-id attributes on every publish, which silently breaks DOM-targeting JavaScript. Working in browser dev tools against the published output, I traced each failure to its element and confirmed that grouped objects expose a stable container the animation can target as a single unit.
Outcome
Delivered on deadline, patterns kept for good
The finished course shipped as a Review 360 link and packaged source file — five slides matching the studio's design system, with every interactive element built as a native, editable Storyline object.
Beyond the deliverable, this project deepened my toolkit for extending Storyline past its native capabilities: JavaScript-driven visual effects, runtime library loading, variable-bridged communication between custom code and Storyline triggers, and Web Object embedding for full custom interactions.
These are patterns I now bring to client work where standard authoring-tool interactions aren't enough to match a design vision.
2
Deliverables — Review 360 link + source .story file
6
Interaction patterns added to my toolkit