How to Implement Object Zooming in Articulate Storyline Using JavaScript

Storyline Object Zooming with JavaScript
Storyline Object Zooming with JavaScript

Introduction

Zooming enhances learner interaction and engagement on e-learning slides. While Articulate Storyline offers a zoom region feature, it has limitations. It only allows zooming the entire slide along the timeline and doesn’t support zooming specific objects with triggers. To address this limitation, I’ve developed a custom JavaScript library that enables zooming on specific objects on slides using triggers.

Preview

Step 1: Setting up JavaScript Trigger on Master Slide

  1. Open your Articulate Storyline project.
  2. Go to the Master Slide view.
  3. Add a JavaScript trigger when time start and paste the following code:

Step 2: Identifying Object Accessibility Name

  1. Navigate to the slide containing the object you want to zoom.
  2. Right-click on the object and note down its accessibility name.

Step 3: Setting up JavaScript Trigger for Object Zoom

  1. Add a trigger to the object for the “User clicks” event.
  2. Paste the following code, replacing "Object_accessibility_name" with the accessibility name of your object:

Additional Information

  • This zooming functionality also works on all touch devices.
  • Repeat Step 2 and Step 3 for each object you want to zoom.

Video Tutorial

Download Source file

Share this article
Shareable URL
Leave a Reply

Your email address will not be published. Required fields are marked *

Read next