Free to use: A/B image & video comparison slider for Articulate Storyline 360

Mar 31, 2022

Hi all,

I was looking for a simple image/video comparison slider interaction for Storyline and although there are quite a few out there, they didn't have the features I was after or might be a bit cumbersome to implement or run.

So I decided to create my own and share it with everyone!

A/B image & video comparison slider for Articulate Storyline 360


  • Fairly lightweight JavaScript, run on a trigger (slider move)
  • Works on images, videos, storyline shapes, etc.
  • Works with transparent content (e.g. PNG’s with transparency)
  • Multiple sliders on one page
  • One slider can crop multiple layers
  • Width or height cropping
  • Any size content – will always crop full width or height
  • Supports publishing to Web (HTML), Review 360, SCORM etc. packages.
  • License: MIT


  • Right-to-left or bottom-to-top crop only
  • Works with any layer in a group, but not on a group (I.e. groups cannot be cropped, yet)
  • Uses light DOM manipulation - may break if Articulate changes DOM structure
  • Won’t work in Preview mode – must be published to preview
  • Video: synchronisation between two videos is down to Storyline, no custom re-synchronisation implemented, yet.

Video with examples and full setup tutorial (apologies for the audio):

Examples and docs:

Full JavaScript:

Basic and advanced example projects and docs are attached.


PJ Palomaki
Digital Innovation Lead
AVT Connect, Brighton, UK

9 Replies