Actions and events

You can trigger actions on different events — there are few built-in ones to control the timelines, but you can also add your own.

How it works

There are two different attributes that will help you trigger actions:

• af-on attribute — specify event(s) to trigger action(s)
• af-action attribute — specify action(s) to trigger

af-on

Specify one or more comma-separated events that will trigger action specified with af-action attribute. Events are normal JS events, like click, mouseover, etc.

<div af-on="mousedown" ...></div>

af-action

You need to specify at least action name and target; you can also optionally provide arguments that wil be passed to the action.

By default, following actions are available:

Action	Description
play	Starts the timeline
pause	Pauses the timeline
toggle	Toggles the timeline (pauses if playing, plays if paused)
reverse	Reverses the timeline
restart	Restarts the timeline

Target can technically be two things - a timaline name (if you want to apply one of the above actions), or anything else in case you’re using custom action. Arguments are optional, and can either be an object, or a simple value (boolean, number, string, etc).

Here’s how it could look like for a default action:

<div af-on="click" af-action="shapes, toggle"></div>

This will trigger toggle action on shapes timeline when you click on the element where af-on attribute is specified.

Custom actions

Custom actions are JS functions you can add to AF.actions object. They’re added when the framework is initialized. For a very simplified example, let’s add an alert action:

AF.init({
  actions: {
    alert (target, event, args, breakpoint) {
      console.debug(target, event, args, breakpoint)
    }
  }
})

As you can see, it receives 4 arguments:

• target — whatever was specified as the target of the action
• event — the browser event that triggered the action (object)
• args — the arguments that were passed to the action (or null, if there wasn’t any)
• breakpoint — the breakpoint that the action was triggered on (string, like xxl or md)

Here’s how you can trigger it in the HTML:

<div af-on="click" af-action="alert, null, Hello world!"></div>

This will pass the following arguments to the alert action:

• target: null
• event: event object
• args: "Hello world!"
• breakpoint: bp (whatever the current breakpoint is)

Actions can be responsive too — so you can specify different af-on and af-action for different breakpoints. JS API will be added soon to manipulate timelines and objects — stay tuned!

Examples

Toggle timeline on click
Click on the button to toggle the box timeline.