Example

Monica_Vazquez's avatar
Monica_Vazquez
Community Member
11 days ago

Leveling up Web Objects: Two-way communication between Storyline and Spline 3D 🚀

Hi everyone! 👋

I’m super excited to share a portfolio project I recently finished called Playcraft Assistant. My goal was to push the boundaries of what we can do with Web Objects and custom JavaScript in Storyline.

Instead of just embedding a static 3D model, I wanted Storyline to act as the "brain" and control a live 3D engine.

Here is how it works under the hood:

  • The Visuals: I built an interactive 3D robot using Spline.
  • The Bridge: I wrote a custom HTML/JS wrapper using the postMessage API to create a communication tunnel between the Articulate player and the iframe.
  • The Result: When you click native Storyline buttons or change slides, JavaScript triggers specific animations in the 3D model (Greeting, Loading, etc.) in real-time.
  • The UI: I also coded a custom "terminal typewriter" effect using GSAP and Storyline text variables (making it 100% native and accessible without breaking the published SVG text).

Playcraft Assistant

It was a fantastic technical challenge dealing with iframe race conditions and variable syncing, but the result feels incredibly seamless.

I’d love to hear your thoughts, feedback, or any ideas on how to take this even further. Also, if anyone is trying to connect external web apps or 3D models with Storyline variables, I’d be happy to share some of the JavaScript logic!

Happy developing! 👩‍💻✨

1 Reply

  • LD_Sabrina's avatar
    LD_Sabrina
    Community Member
    11 days ago

    This is really cute! I had so much fun seeing how the eyes followed my mouse :-D and loved the tyewriter effect.

    Wish I had the time (and patience) to built something like that. 

    As a former Game Designer I noticed, that the "loading/process" of the files felt a little too long and that the background video jumps when it has finished a loop. 

    Did you know, you can change the (site) language in the player settings of storyline? My browser asked me, if I wanted the spanish translated.

    Really impressive work, I enjoyed it very much.

Getting Started with the E-Learning Challenges

Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.