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

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

Features

• 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

Limitations

• 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):
https://vimeo.com/694442676/bf0a02b7f7

Examples and docs:
https://360.articulate.com/review/content/aa9eb116-4b5c-42a6-ac62-816cb52ce03f

Full JavaScript:
https://gist.github.com/pjburnhill/795e706db77950ac220be90f89ab2e66

Basic and advanced example projects and docs are attached.

Enjoy!

PJ Palomaki
Digital Innovation Lead
AVT Connect, Brighton, UK