Games, GSAP animation and motion effects built inside Storyline with JavaScript. Platformers, game shows and particle effects you can take apart and reuse.
Motion & Games
Learn how to build a clickable dial interaction in Articulate Storyline using JavaScript and GSAP. Each click rotates a needle, transitions colors, swaps images, and updates text, all in one…
Oct 25, 2026 · 7 min read
Motion & Games
Learn how to build a JavaScript x-ray lens effect in Articulate Storyline using four slide objects and a single Execute JavaScript trigger. This step-by-step tutorial walks you through the DOM…
Oct 6, 2026 · 15 min read
Motion & Games
Operation Fractured Future is a SCORM-compatible cybersecurity training game that drops learners into four high-stakes crisis scenarios between 2024 and 2030, where every decision shapes the future…
Sep 27, 2026 · 9 min read
Motion & Games
Your security awareness training isn't preparing employees for real attacks. Inbox Zero is a social engineering survival game that drops learners into a realistic multi-channel inbox and forces the…
Sep 6, 2026 · 6 min read
Motion & Games
Learn how to build an accessible image comparison slider for e-learning that works in Rise 360, Storyline, SharePoint, or as a standalone page. This interactive before-and-after slider includes…
Jul 5, 2026 · 12 min read
Motion & Games
Transform dry security compliance training into an engaging cybersecurity tower defense game where learners defend corporate networks from phishing, ransomware, and nation-state attackers. This…
Jun 28, 2026 · 18 min read
Motion & Games
Transform your training sessions with this interactive bingo card generator that works in Rise 360, Storyline, or as a standalone web tool. Complete with customizable presets, automatic bingo…
Jun 21, 2026 · 7 min read
Motion & Games
Learn how to build a Who Wants to Be a Millionaire game for e-learning that works in Articulate Rise 360, Storyline, SharePoint, or as a standalone webpage. This complete tutorial includes full…
Jun 14, 2026 · 14 min read
Motion & Games
Learn how to build an interactive Jeopardy game for e-learning that works in Articulate Rise 360, Storyline, SharePoint, or as a standalone webpage. This complete tutorial includes full code, team…
Jun 7, 2026 · 12 min read
Motion & Games
Learn how to build a fully playable 3D platformer game inside Articulate Storyline using Three.js, Mixamo characters, and free Kenney assets. This step-by-step guide covers character setup, level…
May 11, 2026 · 14 min read
Motion & Games
Transform your Articulate Storyline courses with stunning particle effects—bursting stars, floating hearts, and colorful confetti that celebrate learner success. This beginner-friendly tutorial…
Mar 22, 2026 · 12 min read
Motion & Games
The Compliance Heist is a SCORM compliant cybersecurity training game that teaches social engineering awareness through immersive branching scenarios and cinematic design.
Feb 18, 2026 · 9 min read
Motion & Games
Learn how to create stunning SVG path animation in Articulate Storyline using a powerful JavaScript module. This step-by-step tutorial shows you how to synchronize "self-drawing" graphics with your…
Feb 1, 2026 · 8 min read
Motion & Games
Learn how to create a stunning "draw-on" SVG animation in Articulate Storyline that perfectly syncs with your timeline. This step-by-step tutorial covers GSAP integration, timeline synchronization…
Jan 18, 2026 · 12 min read
Motion & Games
Ever wanted a slider that curves, zigzags, or follows a custom path instead of just moving left to right? In this tutorial, I'll walk you through creating a draggable handle that follows any SVG…
Jan 11, 2026 · 9 min read
Motion & Games
In Part 1, we built a smooth, keyboard-controlled animated character with proper state management. Now we're taking it further with a scrolling world that moves as your character explores, edge…
Jan 7, 2026 · 8 min read
Motion & Games
Learn how to build a smooth, keyboard-controlled animated character for your Storyline courses using PNG sprite frames, JavaScript, and the GSAP animation library. This step-by-step tutorial covers…
Jun 5, 2025 · 12 min read
Motion & Games
Add comic-book punch to your Storyline text with this JavaScript function—letter-by-letter bounce animations, deep layered shadows, and customizable skew and rotation. Pass in your colors, shadow…
Nov 5, 2024 · 6 min read
Motion & Games
Turn your Storyline course into a retro space odyssey with this custom JavaScript animation—pixelated stars drift past, blocky planets float by, and learners feel like they're traveling through a…
Oct 10, 2024 · 5 min read
Motion & Games
Storyline doesn't support gradient text natively—but JavaScript can fix that. This trigger injects an SVG gradient directly into your text element, giving you bold rainbow stripes or any multi-color…
Sep 12, 2024 · 3 min read
Motion & Games
Mark quiz successes and module completions with a burst of confetti—it's positive reinforcement that actually works. Load the confetti.js library via CDN, paste their "School Pride" example (or any…
Jul 23, 2024 · 5 min read
Motion & Games
Make any object follow the learner's cursor with smooth GSAP animation and subtle rotation based on movement direction. This code tracks mouse position within your slide boundaries, tilts the object…
Jul 10, 2024 · 4 min read
Motion & Games
Stop hardcoding pixel values that break when learners resize their browser. This technique uses a reference rectangle to calculate positions as percentages of the stage width, so your GSAP…
Jun 26, 2024 · 5 min read
Motion & Games
Build a prize wheel that spins smoothly and lands on a random section every time. This GSAP animation uses a two-part approach—instant rotation to reset position, then a dramatic spin with…
Jun 18, 2024 · 4 min read
A short email when something new goes up. Unsubscribe anytime.