Browse Articles

Browse Articles

Storyline 360: Advanced JavaScript API

Article Last Updated

This article applies to:

Storyline 360

Attention, JavaScript enthusiasts! Get ready to unlock powerful interactivity using the advanced JavaScript API feature in Storyline 360. Gain precise control over object properties, trigger custom animations, and create advanced effects like parallax. Read on to learn more.

Use the Advanced JavaScript API

When it comes to creating powerful interactions using the advanced JavaScript API, you’ve got options. You can modify object properties, build custom animations, apply code snippets, and more. Explore the possibilities below.

Find the Object ID

To get started, you'll first need to get the object’s ID. Find that information using any of the following methods:

  • Right-click the object and select the copy icon. The object ID that isn’t in the parenthesis will be copied to your clipboard.

The context menu in Storyline 360.

  • In the JavaScript editor, choose your object from the Object reference drop-down arrow, then click Add. The object ID is referenced in the object() function.

JavaScript editor in Storyline 360.

Define Object Properties

Once you have the object ID, you can reference it to define any of these object properties:

  • Position: x, y (horizontal/vertical location)
  • Scale: scaleX, scaleY, scale (0–100%)
  • Rotation: rotation (0–360°)
  • Opacity: opacity (0–100%)
  • Depth Order: depth
  • Size: width, height (read-only)
  • State: state (set by name)

Note: You must use dot syntax to define the position, rotation, and scale object properties. For example:

const ObjectName = object('ObjectID');
ObjectName.rotation = 45; // Rotate object 45 degrees
ObjectName.x = 0; // Move the object all the way to the left of the screen
ObjectName.scaleX += 10; // scale up by 10%

Adjust Core Functions

You can use any of the following core functions:

Mouse Cursor

  • Cursor location: pointerX(), pointerY()
  • Hide the cursor: hidePointer()
  • Show the cursor: showPointer()

Slide Dimensions    

  • slideWidth()
  • slideHeight()

Variables (previously GetVar and SetVar)

  • Retrieve a variable's value: getVar('name')
  • Set a variable's value: setVar('name', value)

Updates

  • Run a function continuously at 60fps: update(callback)

const ObjectName = object('ObjectID');
update(() => {
  // move the ObjectName down if it's y is less than
  // the height of the slide
  if (ObjectName.y < slideHeight()) {
    ObjectName.y1 += 1;
  }
});

Explore JavaScript Code Snippets

The following common JavaScript code snippets can also be applied to an object’s ID.

Rotate Object Based on a Variable
Control an object's rotation using a variable.

object('ObjectID').rotation = getVar('VariableID');

Follow the Cursor (Mouse or Touch)
Sync an object with the cursor.

const ObjectName = object('ObjectID');
update(() => {
  // use 1/2 the width and height to center the object  
  ObjectName.x = pointerX() - ObjectName.width / 2;
  ObjectName.y = pointerY() - ObjectName.height / 2;
});

Point at the Cursor
Orient an object toward the cursor.

const ObjectName = object('ObjectID');
update(() => {
  const dx = myObject.x + ObjectName.width / 2 - pointerX();
  const dy = myObject.y + ObjectName.height / 2 - pointerY();
  const angle = Math.atan2(dy, dx);
  ObjectName.rotation = angle / Math.PI * 180;
});

Parallax Motion
Create a parallax effect by moving an object based on a percentage of the cursor's position. You can even give it an optional offset—as in the code snippet shown below, which would be 200 pixels.

const ObjectName = object('ObjectID');
update(() => {
  ObjectName.x = 200 + pointerX() * .25;
});

Move To
Ease an object to 500 pixels on the x.

const ObjectName = object('ObjectID');
update(() => {
  ObjectName.x += (500 - circle.x) / 12;
});

Animation
Use the native JavaScript animate function—a feature-rich animation API—to create animations. Animations created with this function don’t alter the properties described above. Instead, these animations operate independently within their own scope and are designed to be modern static animations on the timeline.

To make animations seekable on the timeline, wrap them in the addToTimeline function:

const ObjectName = object('ObjectID');
addToTimeline(
  rect.animate(
    [
      { transform: 'translateX(0px)' },
      { transform: 'translateX(200px) rotate(45deg)', filter: 'blur(4px)' }
    ],
    {
      duration: 1000, // Animation duration in milliseconds<
      easing: 'ease-in-out', // Easing function
      fill: 'forwards' // Keep the final state after animation
    }
  )
);

Learn more about the animate function.

Cascading Style Sheets (CSS) Access
Modify an object's CSS with the style property. While some properties don’t apply to certain objects, CSS properties such as filter and transform offer precise control over styling.

// add a 10 pixel blur to an object
object('ObjectID').style.filter = 'blur(10px)';

Learn more about CSS filters.

Test a Sample Interaction

Want to see what’s possible with the advanced JavaScript API? Check out this example. You can explore the code in the project file by clicking the download link in the upper-right corner of the interaction.

Make Interactions Accessible

Follow these tips to make your interactions more accessible:

  • Use interactivity strategically. Avoid using animations and effects purely for decoration. They should have a clear purpose, such as guiding learners through a process or bringing focus to a specific detail.
  • Consider timing. Keep the duration of your animation and effects to less than five seconds. Interactivity that starts automatically and lasts for more than five seconds must have a way for learners to pause, stop, or hide the interaction to conform to accessibility standards. (2.2.2 Pause, Stop, Hide)
  • Give learners control. Provide an option for turning animations and effects off. For example, you could use a true/false variable to track whether a learner wants to see interactivity. Then, depending on the learner's choice, a layer with interactivity or a different layer without interactivity would appear. (2.3.3 Animation from Interactions)
  • Meet the minimum target size. Clickable objects smaller than the minimum target size of 24 pixels wide by 24 pixels tall can make accurate interaction difficult for learners. Ensure interactive elements meet the minimum target size or have enough space around them. (2.5.8 Target Size [Minimum])
  • Keep it simple. Fast, complex, or nonessential interactivity can increase cognitive load. To boost accessibility, synchronize your interactions with text or narration, allow learners to turn interactivity off, and ensure interactions align with learning objectives.

Understand Compatibility

Advanced JavaScript API is exclusive to Storyline 360 as of March 2025. While you can open, edit, and publish projects that use this API in earlier versions of Storyline 360, the code will break.