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);
});

destroy

Scene destroy event.
Fires whenvever the scene is destroyed. This can be used to tidy up custom behaviour used in events.

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
reset boolean

Indicates if the destroy method was called with reset true or false.
Since:
  • 1.1.0

Source:
Example
scene.on("enter", function (event) {
       // add custom action
       $("#my-elem").left("200");
     })
     .on("destroy", function (event) {
       // reset my element to start position
       if (event.reset) {
         $("#my-elem").left("0");
       }
     });

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.

For details on this event and the order in which it is fired, please review the ScrollScene.progress method.

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.

For details on this event and the order in which it is fired, please review the ScrollScene.progress method.

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.

For details on this event and the order in which it is fired, please review the ScrollScene.progress method.

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.

For details on this event and the order in which it is fired, please review the ScrollScene.progress method.

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.");
});

shift

Scene shift event.
Fires whenvever the start or end scroll offset of the scene change. This happens explicitely, when one of these values change: offset, duration or triggerHook. It will fire implicitly when the triggerElement changes, if the new element has a different position (most cases). It will also fire implicitly when the size of the container changes and the triggerHook is anything other than onLeave.

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
reason string

Indicates why the scene has shifted
Since:
  • 1.1.0

Source:
Example
scene.on("shift", function (event) {
		console.log("Scene moved, because the " + event.reason + " has 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.

For details on this event and the order in which it is fired, please review the ScrollScene.progress method.

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.");
});