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! š©āš»āØ
