When the 360° image feature was added to Articulate Storyline back in July 2021 one of the first thing that I and several other developers tried to do straight away was add moving images to the background in order to create a 360° video project.

One of the ways that we thought we could get around the image-only upload option was to instead upload an animated GIF as the file, but as you can see any attempt to do that is frozen as soon as the project is published.

Although surprisingly the animation contained within the GIF file included in the project when published remains intact, which we can see by decoding the base64 version image that is used to feed into the 360°-image sphere object.

After investigating this further I discovered that the framework behind Articulate Storyline’s new 360° image feature is Three.js, an open-source cross-browser JavaScript library used to generate and animate 3d shapes within the browser using WebGL.

It is therefore a problem more to do with Three.JS not supporting animated GIFs rather than this being anything that Storyline can control itself.

I was able to find a number of extensions, some of which I actually paid for to experiment with on Storyline published projects but still the ability to convert a static 360 project into a moving one was turning into a minefield of unfamiliar code and console error messages which made me think I was chasing a rabbit down a hole.

Now we flashforward one full year and a moment of realisation when I was checking out another project that used Three.JS and VideoTextures.

Being able to use video as our background texture would in some ways be preferable because compression and image quality can be better controlled on larger pieces of animation, but the task at hand looked more daunting because it would require ripping out Storyline’s existing textureloader function all together.

Still I decided to give it a go and documented my struggles on Twitter until FINALLY I had a breakthrough.

This new method does require some customisation of more than one file within the published project, but it absolutely works across both desktop and mobile devices, with any and all Storyline triggers built into the project remaining completely intact.

The job isn’t completely done however due to the fact that our current method acts as a replacement for the textureloader function entirely, so If the project contains more than one 360 image then they will both end up loading the same video when the slide changes over.

I’m still looking into what might be possible by feeding an array into our VideoTexture instead of having an absolute defined video ID, and things are looking promising but either way I intend to publish the full working method along with some guided instruction on the Discover eLearning website.

You will also very soon be able to find more of our templates and starter guides for Storyline and more over on Gumroad, so keep an eye on our News feed for details of when you can get your hands on these great projects coming from Discover eLearning.