Articulate Storyline JavaScript tutorials

Copyable Storyline 360 builds that go past the built-in triggers: sliders, drag and drop, card systems and player tweaks. Each one has the full code and steps you can follow.

All Storyline Interaction Lab posts

Storyline Interaction Lab

Create a JavaScript Matching Activity in Articulate Storyline

Learn how to create a JavaScript matching activity in Articulate Storyline with visual connection lines, audio feedback, randomized definitions, and full keyboard accessibility. This step-by-step…

Mar 15, 2026 · 15 min read

Storyline Interaction Lab

How to Create a JavaScript Accordion in Articulate Storyline

Learn how to create a JavaScript accordion in Articulate Storyline with this step-by-step tutorial. Build an engaging card-based navigation with smooth animations, hover effects, and automatic…

Feb 8, 2026 · 12 min read

Storyline Interaction Lab

Creating the Matrix Rain Effect with JavaScript

Recreate the iconic Matrix digital rain in your Storyline courses—cascading green characters in that signature font, falling at random speeds across the screen. The code dynamically loads the Matrix…

Aug 14, 2024 · 5 min read

Storyline Interaction Lab

Bringing back Articulate Storyline Player Skins

Remember when custom player skins were everywhere in Flash? You can bring that back to Storyline with a simple JavaScript function that applies background images to the top bar, bottom bar, sidebar…

Jul 20, 2024 · 4 min read

Free tools for this topic

  • Storyline Seekbar Restyle the Storyline seekbar, preview it live and paste the generated JavaScript into a trigger.
  • Storyline Skin Generator Build a custom Storyline 360 player skin in your browser and copy the code into your course.
  • Storyline RoundButtons Swap Storyline's square player buttons for rounded pill buttons with one JavaScript snippet.

Get new tutorials, tools and templates

A short email when something new goes up. Unsubscribe anytime.