ScrollMagic

Plugin: addIndicators

This plugin was formerly known as the ScrollMagic debug extension.

It enables you to add visual indicators to your page, to be able to see exactly when a scene is triggered.

To have access to this extension, please include plugins/debug.addIndicators.js.

Source:

Controller Constructor Extension

new ScrollMagic.Controller(options)

Every ScrollMagic.Controller instance now accepts an additional option.
See ScrollMagic.Controller for a complete list of the standard options.

Parameters:
Name Type Argument Description
options object <optional>

Options for the Controller.

Properties
Name Type Argument Default Description
addIndicators boolean <optional>
 false

If set to true every scene that is added to the controller will automatically get indicators added to it.
Source:
Example
// make a controller and add indicators to all scenes attached
var controller = new ScrollMagic.Controller({addIndicators: true});
// this scene will automatically have indicators added to it
new ScrollMagic.Scene()
               .addTo(controller);

Scene Control Methods

Scene.addIndicators(options)

Add visual indicators for a ScrollMagic.Scene.

Parameters:
Name Type Argument Description
options object <optional>

An object containing one or more options for the indicators.

Properties
Name Type Argument Default Description
parent string | object <optional>
 undefined

A selector, DOM Object or a jQuery object that the indicators should be added to.
If undefined, the controller's container will be used.
name number <optional>
 ""

This string will be displayed at the start and end indicators of the scene for identification purposes. If no name is supplied an automatic index will be used.
indent number <optional>
 0

Additional position offset for the indicators (useful, when having multiple scenes starting at the same position).
colorStart string <optional>
 green

CSS color definition for the start indicator.
colorEnd string <optional>
 red

CSS color definition for the end indicator.
colorTrigger string <optional>
 blue

CSS color definition for the trigger indicator.
Source:
Example
// add basic indicators
scene.addIndicators()

// passing options
scene.addIndicators({name: "pin scene", colorEnd: "#FFFFFF"});

Scene.removeIndicators()

Removes visual indicators from a ScrollMagic.Scene.

Source:
Example
// remove previously added indicators
scene.removeIndicators()