(Last Updated: July 15, 2021)

You can create almost all common interactivity with numerous built-in events – actions and triggers in Saola Animate. However, complicated interactivity needs coding skills. In today’s tutorial, you will learn how to create and call JavaScript functions in Saola Animate 3.

This tutorial covers:

  1. Create JavaScript Functions
  2. Call JavaScript Functions

Create JavaScript Functions

To create a new JavaScript function, open the Functions pane. If you don’t see this pane, click the View menu > Functions.

Add new function

In this pane, click the New Function button and select one of the following types of functions:

  • Normal functions can be called in other functions. You can edit the parameters of this function type.
  • Event Handler functions, including element, scene, timeline, and document event handlers, are registered with events and have fixed parameters.

Use JavaScript APIs

Saola Animate publishes many methods and properties of common element types. Show these methods in the JavaScript Function editor by clicking Options > Show API in the toolbar. These methods are listed with in-app documentation in the pane below the editing area. Just double-click a method to quickly insert it into the editing area.

Javascript APIs

Write New JavaScript Functions

Besides the JavaScript APIs that Saola Animate provides, you can write your own function in the dialog that appears. The editor comes with several features that support and speed up the coding process, including code suggestion, code folding, line number, etc. Toggle these features by clicking Options in the toolbar.

write new Javascript function

After adding a new function, you can:

 tools to edit
  • Remove functions: Select one or more functions and press DELETE or click Delete (1) in the toolbar. Similarly, you can right-click a function and select Delete.
  • Rename functions: Right-click a function and click Rename. Then, type a new name and press ENTER or click any elsewhere outside to submit changes. Note that function names must not start with a number.
  • Export functions to JavaScript files: Select one or more functions and click Export (2) in the toolbar. Likewise, right-click a function and select Export. Then, provide the file name for the exported file.
  • Edit functions: Double-click a function or click Edit (3) in the toolbar to edit a function. Similarly, you can right-click a function and select Edit. For normal functions, you can edit their names, contents, and parameters. For event handler functions registered with events, you can only edit their names and content because their parameters are set to fixed.

Call JavaScript Functions

You use the Run JavaScript action to invoke a function. You can find the action in the Event Handlers and Timeline Triggers dialogs. These dialogs appear when you click the Event Handlers or the Insert Trigger button, respectively.

After you add the Run JavaScript action, double-click the Params cell > Change Function to attach the function you want. You can also click Add Function to create a new function. If you want to edit the attached function, click Edit Function.

Call Javascript functions

That’s how you create and call JavaScript functions to make advanced interactivity. Download Saola Animate and try it out today.

See Also:

Use Events – Actions
Use Multiple Timelines
Control Video and Audio Playback
Create Hover Effects
Use Timeline Triggers
Use Timeline Triggers to Loop Animation
Create Timeline Labels
Use External JavaScript, CSS, and HTML