ScrollMagic

Classes

Classes

ScrollMagic
ScrollScene

Events

change

Scene change event.
Fires whenvever a property of the scene is changed.

Properties:
Name Type Description
event object

The event Object passed to each callback

Properties
Name Type Description
type string

The name of the event
target ScrollScene

The ScrollScene object that triggered this event
what string

Indicates what value has been changed
newval mixed

The new value of the changed property
Source:
Example
scene.on("change", function (event) {		console.log("Scene Property \"" + event.what + "\" changed to " + event.newval);});

end

Scene end event.
Fires whenever the scroll position its the ending point of the scene.
It will also fire when scrolling back up from after the scene and going over its end position. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.

Properties:
Name Type Description
event object

The event Object passed to each callback

Properties
Name Type Description
type string

The name of the event
target ScrollScene

The ScrollScene object that triggered this event
progress number

Reflects the current progress of the scene
state string

The current state of the scene "BEFORE", "DURING" or "AFTER"
scrollDirection string

Indicates which way we are scrolling "PAUSED", "FORWARD" or "REVERSE"
Source:
Example
scene.on("end", function (event) {		alert("Hit end point of scene.");});

enter

Scene enter event.
Fires whenever the scene enters the "DURING" state.
Keep in mind that it doesn't matter if the scene plays forward or backward: This event always fires when the scene enters its active scroll timeframe, regardless of the scroll-direction.

Properties:
Name Type Description
event object

The event Object passed to each callback

Properties
Name Type Description
type string

The name of the event
target ScrollScene

The ScrollScene object that triggered this event
progress number

Reflects the current progress of the scene
state string

The current state of the scene "BEFORE", "DURING" or "AFTER"
scrollDirection string

Indicates which way we are scrolling "PAUSED", "FORWARD" or "REVERSE"
Source:
Example
scene.on("enter", function (event) {		alert("Entered a scene.");});

leave

Scene leave event.
Fires whenever the scene's state goes from "DURING" to either "BEFORE" or "AFTER".
Keep in mind that it doesn't matter if the scene plays forward or backward: This event always fires when the scene leaves its active scroll timeframe, regardless of the scroll-direction.

Properties:
Name Type Description
event object

The event Object passed to each callback

Properties
Name Type Description
type string

The name of the event
target ScrollScene

The ScrollScene object that triggered this event
progress number

Reflects the current progress of the scene
state string

The current state of the scene "BEFORE", "DURING" or "AFTER"
scrollDirection string

Indicates which way we are scrolling "PAUSED", "FORWARD" or "REVERSE"
Source:
Example
scene.on("leave", function (event) {		alert("Left a scene.");});

progress

Scene progress event.
Fires whenever the progress of the scene changes.

Properties:
Name Type Description
event object

The event Object passed to each callback

Properties
Name Type Description
type string

The name of the event
target ScrollScene

The ScrollScene object that triggered this event
progress number

Reflects the current progress of the scene
state string

The current state of the scene "BEFORE", "DURING" or "AFTER"
scrollDirection string

Indicates which way we are scrolling "PAUSED", "FORWARD" or "REVERSE"
Source:
Example
scene.on("progress", function (event) {		console.log("Scene progress changed.");});

start

Scene start event.
Fires whenever the scroll position its the starting point of the scene.
It will also fire when scrolling back up going over the start position of the scene. If you want something to happen only when scrolling down/right, use the scrollDirection parameter passed to the callback.

Properties:
Name Type Description
event object

The event Object passed to each callback

Properties
Name Type Description
type string

The name of the event
target ScrollScene

The ScrollScene object that triggered this event
progress number

Reflects the current progress of the scene
state string

The current state of the scene "BEFORE", "DURING" or "AFTER"
scrollDirection string

Indicates which way we are scrolling "PAUSED", "FORWARD" or "REVERSE"
Source:
Example
scene.on("start", function (event) {		alert("Hit start point of scene.");});

update

Scene update event.
Fires whenever the scene is updated (but not necessarily changes the progress).

Properties:
Name Type Description
event object

The event Object passed to each callback

Properties
Name Type Description
type string

The name of the event
target ScrollScene

The ScrollScene object that triggered this event
startPos number

The starting position of the scene (in relation to the conainer)
endPos number

The ending position of the scene (in relation to the conainer)
scrollPos number

The current scroll position of the container
Source:
Example
scene.on("update", function (event) {		console.log("Scene updated.");});