ScrollMagic

by lipp

add-to-doclets233f694  created February 0th 2016

other versions

2
Classes
43
Functions

ScrollMagicController
  • options

The main class that is needed once per scroll container.

Arguments:

  1. optionsoptional

    An object containing one or more options for the controller.

    • containeroptional, default: window

      A selector, DOM object that references the main container for scrolling.

    • globalSceneOptionsoptional, default: {}

      These options will be passed to every Scene that is added to the controller using the addScene method. For more information on Scene options see ScrollMagic.Scene.

    • logleveloptional, default: 2

      Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.

      • 0 => silent
      • 1 => errors
      • 2 => errors, warnings
      • 3 => errors, warnings, debuginfo
    • refreshIntervaloptional, default: 100

      Some changes don't call events by default, like changing the container size or moving a scene trigger element.
      This interval polls these parameters to fire the necessary events.
      If you don't use custom containers, trigger elements or have static layouts, where the positions of the trigger elements don't change, you can set this to 0 disable interval checking and improve performance.

    • verticaloptional, default: true

      Sets the scroll mode to vertical (true) or horizontal (false) scrolling.

Examples:

// basic initialization
var controller = new ScrollMagic.Controller();

// passing options
var controller = new ScrollMagic.Controller({container: "#myContainer", loglevel: 3});

fx
ScrollMagicController#addScene
  • newScene

Kind
function
Scope
instance

Add one ore more scene(s) to the controller.
This is the equivalent to Scene.addTo(controller).

Arguments:

  1. newScene

    ScrollMagic Scene or Array of Scenes to be added to the controller.

Returns:

  1. Parent object for chaining.

Examples:

// with a previously defined scene
controller.addScene(scene);

// with a newly created scene.
controller.addScene(new ScrollMagic.Scene({duration : 0}));

// adding multiple scenes
controller.addScene([scene, scene2, new ScrollMagic.Scene({duration : 0})]);

fx
ScrollMagicController#destroy
  • resetScenes

Kind
function
Scope
instance

Destroy the Controller, all Scenes and everything.

Arguments:

  1. resetScenesoptional, default: false

    If true the pins and tweens (if existent) of all scenes will be reset.

Returns:

  1. Null to unset handler variables.

Examples:

// without resetting the scenes
controller = controller.destroy();

// with scene reset
controller = controller.destroy(true);

fx
ScrollMagicController#enabled
  • newState

Kind
function
Scope
instance

Get or Set the current enabled state of the controller.
This can be used to disable all Scenes connected to the controller without destroying or removing them.

Arguments:

  1. newStateoptional

    The new enabled state of the controller true or false.

Returns:

  1. Current enabled state or parent object for chaining.

Examples:

// get the current value
var enabled = controller.enabled();

// disable the controller
controller.enabled(false);

fx
ScrollMagicController#info
  • about

Kind
function
Scope
instance

Get all infos or one in particular about the controller.

Arguments:

  1. aboutoptional

    If passed only this info will be returned instead of an object containing all.
    Valid options are:

    • "size" => the current viewport size of the container
    • "vertical" => true if vertical scrolling, otherwise false
    • "scrollPos" => the current scroll position
    • "scrollDirection" => the last known direction of the scroll
    • "container" => the container element
    • "isDocument" => true if container element is the document.

Returns:

  1. The requested info(s).

Examples:

// returns the current scroll position (number)
var scrollPos = controller.info("scrollPos");

// returns all infos as an object
var infos = controller.info();

fx
ScrollMagicController#loglevel
  • newLoglevel

Kind
function
Scope
instance

Get or Set the current loglevel option value.

Arguments:

  1. newLogleveloptional

    The new loglevel setting of the Controller. [0-3]

Returns:

  1. Current loglevel or parent object for chaining.

Examples:

// get the current value
var loglevel = controller.loglevel();

// set a new value
controller.loglevel(3);

fx
ScrollMagicController#removeScene
  • Scene

Kind
function
Scope
instance

Remove one ore more scene(s) from the controller.
This is the equivalent to Scene.remove().

Arguments:

  1. Scene

    ScrollMagic Scene or Array of Scenes to be removed from the controller.

Returns:

  1. Parent object for chaining.

Examples:

// remove a scene from the controller
controller.removeScene(scene);

// remove multiple scenes from the controller
controller.removeScene([scene, scene2, scene3]);

fx
ScrollMagicController#scrollPos
  • scrollPosMethod

Kind
function
Scope
instance

Get the current scrollPosition or Set a new method to calculate it.
-> GET: When used as a getter this function will return the current scroll position.
To get a cached value use Controller.info("scrollPos"), which will be updated in the update cycle.
For vertical controllers it will return the top scroll offset and for horizontal applications it will return the left offset.

-> SET: When used as a setter this method prodes a way to permanently overwrite the controller's scroll position calculation.
A typical usecase is when the scroll position is not reflected by the containers scrollTop or scrollLeft values, but for example by the inner offset of a child container.
Moving a child container inside a parent is a commonly used method for several scrolling frameworks, including iScroll.
By providing an alternate calculation function you can make sure ScrollMagic receives the correct scroll position.
Please also bear in mind that your function should return y values for vertical scrolls an x for horizontals.

To change the current scroll position please use Controller.scrollTo().

Arguments:

  1. scrollPosMethodoptional

    The function to be used for the scroll position calculation of the container.

Returns:

  1. Current scroll position or parent object for chaining.

Examples:

// get the current scroll Position
var scrollPos = controller.scrollPos();

// set a new scroll position calculation method
controller.scrollPos(function () {
	return this.info("vertical") ? -mychildcontainer.y : -mychildcontainer.x
});

fx
ScrollMagicController#scrollTo
  • scrollTarget
  • additionalParameter

Kind
function
Since
1.1.0
Scope
instance

Scroll to a numeric scroll offset, a DOM element, the start of a scene or provide an alternate method for scrolling.
For vertical controllers it will change the top scroll offset and for horizontal applications it will change the left offset.

Arguments:

  1. scrollTarget

    The supplied argument can be one of these types:

    1. number -> The container will scroll to this new scroll offset.
    2. string or object -> Can be a selector or a DOM object.
      The container will scroll to the position of this element.
    3. ScrollMagic Scene -> The container will scroll to the start of this scene.
    4. function -> This function will be used for future scroll position modifications.
      This provides a way for you to change the behaviour of scrolling and adding new behaviour like animation. The function receives the new scroll position as a parameter and a reference to the container element using this.
      It may also optionally receive an optional additional parameter (see below)
      NOTE:
      All other options will still work as expected, using the new function to scroll.
  2. additionalParameteroptional

    If a custom scroll function was defined (see above 4.), you may want to supply additional parameters to it, when calling it. You can do this using this parameter – see examples for details. Please note, that this parameter will have no effect, if you use the default scrolling function.

Returns:

  1. Parent object for chaining.

Examples:

// scroll to an offset of 100
controller.scrollTo(100);

// scroll to a DOM element
controller.scrollTo("#anchor");

// scroll to the beginning of a scene
var scene = new ScrollMagic.Scene({offset: 200});
controller.scrollTo(scene);

// define a new scroll position modification function (jQuery animate instead of jump)
controller.scrollTo(function (newScrollPos) {
	$("html, body").animate({scrollTop: newScrollPos});
});
controller.scrollTo(100); // call as usual, but the new function will be used instead

// define a new scroll function with an additional parameter
controller.scrollTo(function (newScrollPos, message) {
 console.log(message);
	$(this).animate({scrollTop: newScrollPos});
});
// call as usual, but supply an extra parameter to the defined custom function
controller.scrollTo(100, "my message");

// define a new scroll function with an additional parameter containing multiple variables
controller.scrollTo(function (newScrollPos, options) {
 someGlobalVar = options.a + options.b;
	$(this).animate({scrollTop: newScrollPos});
});
// call as usual, but supply an extra parameter containing multiple options
controller.scrollTo(100, {a: 1, b: 2});

// define a new scroll function with a callback supplied as an additional parameter
controller.scrollTo(function (newScrollPos, callback) {
	$(this).animate({scrollTop: newScrollPos}, 400, "swing", callback);
});
// call as usual, but supply an extra parameter, which is used as a callback in the previously defined custom scroll function
controller.scrollTo(100, function() {
	console.log("scroll has finished.");
});

fx
ScrollMagicController#update
  • immediately

Kind
function
Scope
instance

Updates the controller params and calls updateScene on every scene, that is attached to the controller.
See Controller.updateScene() for more information about what this means.
In most cases you will not need this function, as it is called constantly, whenever ScrollMagic detects a state change event, like resize or scroll.
The only application for this method is when ScrollMagic fails to detect these events.
One application is with some external scroll libraries (like iScroll) that move an internal container to a negative offset instead of actually scrolling. In this case the update on the controller needs to be called whenever the child container's position changes. For this case there will also be the need to provide a custom function to calculate the correct scroll position. See Controller.scrollPos() for details.

Arguments:

  1. immediatelyoptional, default: false

    If true the update will be instant, if false it will wait until next update cycle (better performance)

Returns:

  1. Parent object for chaining.

Examples:

// update the controller on next cycle (saves performance due to elimination of redundant updates)
controller.update();

// update the controller immediately
controller.update(true);

fx
ScrollMagicController#updateScene
  • Scene
  • immediately

Kind
function
Scope
instance

Update one ore more scene(s) according to the scroll position of the container.
This is the equivalent to Scene.update().
The update method calculates the scene's start and end position (based on the trigger element, trigger hook, duration and offset) and checks it against the current scroll position of the container.
It then updates the current scene state accordingly (or does nothing, if the state is already correct) – Pins will be set to their correct position and tweens will be updated to their correct progress.
Note: This method gets called constantly whenever Controller detects a change. The only application for you is if you change something outside of the realm of ScrollMagic, like moving the trigger or changing tween parameters.

Arguments:

  1. Scene

    ScrollMagic Scene or Array of Scenes that is/are supposed to be updated.

  2. immediatelyoptional, default: false

    If true the update will be instant, if false it will wait until next update cycle.
    This is useful when changing multiple properties of the scene - this way it will only be updated once all new properties are set (updateScenes).

Returns:

  1. Parent object for chaining.

Examples:

// update a specific scene on next cycle
controller.updateScene(scene);

// update a specific scene immediately
controller.updateScene(scene, true);

// update multiple scenes scene on next cycle
controller.updateScene([scene1, scene2, scene3]);

ScrollMagicScene
  • options

A Scene defines where the controller should react and how.

Arguments:

  1. optionsoptional

    Options for the Scene. The options can be updated at any time.
    Instead of setting the options for each scene individually you can also set them globally in the controller as the controllers globalSceneOptions option. The object accepts the same properties as the ones below.
    When a scene is added to the controller the options defined using the Scene constructor will be overwritten by those set in globalSceneOptions.

    • durationoptional, default: 0

      The duration of the scene. If 0 tweens will auto-play when reaching the scene start point, pins will be pinned indefinetly starting at the start position.
      A function retuning the duration value is also supported. Please see Scene.duration() for details.

    • logleveloptional, default: 2

      Loglevel for debugging. Note that logging is disabled in the minified version of ScrollMagic.

      • 0 => silent
      • 1 => errors
      • 2 => errors, warnings
      • 3 => errors, warnings, debuginfo
    • offsetoptional, default: 0

      Offset Value for the Trigger Position. If no triggerElement is defined this will be the scroll distance from the start of the page, after which the scene will start.

    • reverseoptional, default: true

      Should the scene reverse, when scrolling up?

    • triggerElementoptional, default:

      Selector or DOM object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set).

    • triggerHookoptional, default: "onCenter"

      Can be a number between 0 and 1 defining the position of the trigger Hook in relation to the viewport.
      Can also be defined using a string:

      • "onEnter" => 1
      • "onCenter" => 0.5
      • "onLeave" => 0

Instance Members:

Examples:

// create a standard scene and add it to a controller
new ScrollMagic.Scene()
		.addTo(controller);

// create a scene with custom options and assign a handler to it.
var scene = new ScrollMagic.Scene({
		duration: 100,
		offset: 200,
		triggerHook: "onEnter",
		reverse: false
});

fx
ScrollMagicScene#addTo
  • controller

Kind
function
Scope
instance

Add the scene to a controller.
This is the equivalent to Controller.addScene(scene).

Arguments:

  1. controller

    The controller to which the scene should be added.

Returns:

  1. Parent object for chaining.

Examples:

// add a scene to a ScrollMagic Controller
scene.addTo(controller);

fx
ScrollMagicScene#destroy
  • reset

Kind
function
Scope
instance

Destroy the scene and everything.

Arguments:

  1. resetoptional, default: false

    If true the pin and tween (if existent) will be reset.

Returns:

  1. Null to unset handler variables.

Examples:

// destroy the scene without resetting the pin and tween to their initial positions
scene = scene.destroy();

// destroy the scene and reset the pin and tween
scene = scene.destroy(true);

fx
ScrollMagicScene#duration
  • newDuration

Kind
function
Scope
instance

Get or Set the duration option value. As a setter it also accepts a function returning a numeric value.
This is particularly useful for responsive setups.

The duration is updated using the supplied function every time Scene.refresh() is called, which happens periodically from the controller (see ScrollMagic.Controller option refreshInterval).
NOTE: Be aware that it's an easy way to kill performance, if you supply a function that has high CPU demand.
Even for size and position calculations it is recommended to use a variable to cache the value. (see example)
This counts double if you use the same function for multiple scenes.

Arguments:

  1. newDurationoptional

    The new duration of the scene.

Returns:

  1. get - Current scene duration.

  2. set - Parent object for chaining.

Examples:

// get the current duration value
var duration = scene.duration();

// set a new duration
scene.duration(300);

// use a function to automatically adjust the duration to the window height.
var durationValueCache;
function getDuration () {
  return durationValueCache;
}
function updateDuration (e) {
  durationValueCache = window.innerHeight;
}
$(window).on("resize", updateDuration); // update the duration when the window size changes
$(window).triggerHandler("resize"); // set to initial value
scene.duration(getDuration); // supply duration method

fx
ScrollMagicScene#enabled
  • newState

Kind
function
Scope
instance

Get or Set the current enabled state of the scene.
This can be used to disable this scene without removing or destroying it.

Arguments:

  1. newStateoptional

    The new enabled state of the scene true or false.

Returns:

  1. Current enabled state or parent object for chaining.

Examples:

// get the current value
var enabled = scene.enabled();

// disable the scene
scene.enabled(false);

ScrollMagicScene#event:add

Kind
event
Since
2.0.0
Scope
instance

Scene add event.
Fires when the scene is added to a controller. This is mostly used by plugins to know that change might be due.

Properties:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

  4. event.controller

    The controller object the scene was added to.

Examples:

scene.on("add", function (event) {
	console.log('Scene was added to a new controller.');
});

ScrollMagicScene#event:change

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

Properties:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

  4. event.what

    Indicates what value has been changed

  5. event.newval

    The new value of the changed property

Examples:

scene.on("change", function (event) {
	console.log("Scene Property \"" + event.what + "\" changed to " + event.newval);
});

ScrollMagicScene#event:destroy

Kind
event
Since
1.1.0
Scope
instance

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

Properties:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

  4. event.reset

    Indicates if the destroy method was called with reset true or false.

Examples:

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

ScrollMagicScene#event: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 Scene.progress method.

Properties:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

  4. event.progress

    Reflects the current progress of the scene

  5. event.state

    The current state of the scene "DURING" or "AFTER"

  6. event.scrollDirection

    Indicates which way we are scrolling "PAUSED", "FORWARD" or "REVERSE"

Examples:

scene.on("end", function (event) {
	console.log("Hit end point of scene.");
});

ScrollMagicScene#event: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 Scene.progress method.

Properties:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

  4. event.progress

    Reflects the current progress of the scene

  5. event.state

    The current state of the scene - always "DURING"

  6. event.scrollDirection

    Indicates which way we are scrolling "PAUSED", "FORWARD" or "REVERSE"

Examples:

scene.on("enter", function (event) {
	console.log("Scene entered.");
});

ScrollMagicScene#event: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 Scene.progress method.

Properties:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

  4. event.progress

    Reflects the current progress of the scene

  5. event.state

    The current state of the scene "BEFORE" or "AFTER"

  6. event.scrollDirection

    Indicates which way we are scrolling "PAUSED", "FORWARD" or "REVERSE"

Examples:

scene.on("leave", function (event) {
	console.log("Scene left.");
});

ScrollMagicScene#event: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 Scene.progress method.

Properties:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

  4. event.progress

    Reflects the current progress of the scene

  5. event.state

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

  6. event.scrollDirection

    Indicates which way we are scrolling "PAUSED", "FORWARD" or "REVERSE"

Examples:

scene.on("progress", function (event) {
	console.log("Scene progress changed to " + event.progress);
});

ScrollMagicScene#event:remove

Kind
event
Since
2.0.0
Scope
instance

Scene remove event.
Fires when the scene is removed from a controller. This is mostly used by plugins to know that change might be due.

Properties:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

Examples:

scene.on("remove", function (event) {
	console.log('Scene was removed from its controller.');
});

ScrollMagicScene#event:shift

Kind
event
Since
1.1.0
Scope
instance

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:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

  4. event.reason

    Indicates why the scene has shifted

Examples:

scene.on("shift", function (event) {
	console.log("Scene moved, because the " + event.reason + " has changed.)");
});

ScrollMagicScene#event: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 Scene.progress method.

Properties:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

  4. event.progress

    Reflects the current progress of the scene

  5. event.state

    The current state of the scene "BEFORE" or "DURING"

  6. event.scrollDirection

    Indicates which way we are scrolling "PAUSED", "FORWARD" or "REVERSE"

Examples:

scene.on("start", function (event) {
	console.log("Hit start point of scene.");
});

ScrollMagicScene#event:update

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

Properties:

  1. event

    The event Object passed to each callback

  2. event.type

    The name of the event

  3. event.target

    The Scene object that triggered this event

  4. event.startPos

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

  5. event.endPos

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

  6. event.scrollPos

    The current scroll position of the container

Examples:

scene.on("update", function (event) {
	console.log("Scene updated.");
});

fx
ScrollMagicScene#loglevel
  • newLoglevel

Kind
function
Scope
instance

Get or Set the loglevel option value.

Arguments:

  1. newLogleveloptional

    The new loglevel setting of the scene. [0-3]

Returns:

  1. get - Current loglevel.

  2. set - Parent object for chaining.

Examples:

// get the current loglevel
var loglevel = scene.loglevel();

// set new loglevel
scene.loglevel(3);

fx
ScrollMagicScene#off
  • names
  • callback

Kind
function
Scope
instance

Remove one or more event listener.

Arguments:

  1. names

    The name or names of the event that should be removed.

  2. callbackoptional

    A specific callback function that should be removed. If none is passed all callbacks to the event listener will be removed.

Returns:

  1. Parent object for chaining.

Examples:

function callback (event) {
		console.log("Event fired! (" + event.type + ")");
}
// add listeners
scene.on("change update", callback);
// remove listeners
scene.off("change update", callback);

fx
ScrollMagicScene#offset
  • newOffset

Kind
function
Scope
instance

Get or Set the offset option value.

Arguments:

  1. newOffsetoptional

    The new offset of the scene.

Returns:

  1. get - Current scene offset.

  2. set - Parent object for chaining.

Examples:

// get the current offset
var offset = scene.offset();

// set a new offset
scene.offset(100);

fx
ScrollMagicScene#on
  • names
  • callback

Kind
function
Scope
instance

Add one ore more event listener.
The callback function will be fired at the respective event, and an object containing relevant data will be passed to the callback.

Arguments:

  1. names

    The name or names of the event the callback should be attached to.

  2. callback

    A function that should be executed, when the event is dispatched. An event object will be passed to the callback.

Returns:

  1. Parent object for chaining.

Examples:

function callback (event) {
		console.log("Event fired! (" + event.type + ")");
}
// add listeners
scene.on("change update progress start end enter leave", callback);

fx
ScrollMagicScene#progress
  • progress

Kind
function
Scope
instance

Get or Set the scene's progress.
Usually it shouldn't be necessary to use this as a setter, as it is set automatically by scene.update().
The order in which the events are fired depends on the duration of the scene:

  1. Scenes with duration == 0:
    Scenes that have no duration by definition have no ending. Thus the end event will never be fired.
    When the trigger position of the scene is passed the events are always fired in this order:
    enter, start, progress when scrolling forward
    and
    progress, start, leave when scrolling in reverse
  2. Scenes with duration > 0:
    Scenes with a set duration have a defined start and end point.
    When scrolling past the start position of the scene it will fire these events in this order:
    enter, start, progress
    When continuing to scroll and passing the end point it will fire these events:
    progress, end, leave
    When reversing through the end point these events are fired:
    enter, end, progress
    And when continuing to scroll past the start position in reverse it will fire:
    progress, start, leave
    In between start and end the progress event will be called constantly, whenever the progress changes.

In short:
enter events will always trigger before the progress update and leave envents will trigger after the progress update.
start and end will always trigger at their respective position.

Please review the event descriptions for details on the events and the event object that is passed to the callback.

Arguments:

  1. progressoptional

    The new progress value of the scene [0-1].

Returns:

  1. get - Current scene progress.

  2. set - Parent object for chaining.

Examples:

// get the current scene progress
var progress = scene.progress();

// set new scene progress
scene.progress(0.3);

fx
ScrollMagicScene#refresh

    Kind
    function
    Since
    1.1.0
    Scope
    instance

    Updates dynamic scene variables like the trigger element position or the duration. This method is automatically called in regular intervals from the controller. See ScrollMagic.Controller option refreshInterval.

    You can call it to minimize lag, for example when you intentionally change the position of the triggerElement. If you don't it will simply be updated in the next refresh interval of the container, which is usually sufficient.

    Returns:

    1. Parent object for chaining.

    Examples:

    scene = new ScrollMagic.Scene({triggerElement: "#trigger"});
    
    // change the position of the trigger
    $("#trigger").css("top", 500);
    // immediately let the scene know of this change
    scene.refresh();

    fx
    ScrollMagicScene#remove

      Kind
      function
      Scope
      instance

      Remove the scene from the controller.
      This is the equivalent to Controller.removeScene(scene). The scene will not be updated anymore until you readd it to a controller. To remove the pin or the tween you need to call removeTween() or removePin() respectively.

      Returns:

      1. Parent object for chaining.

      Examples:

      // remove the scene from its controller
      scene.remove();

      fx
      ScrollMagicScene#removeClassToggle
      • reset

      Kind
      function
      Scope
      instance

      Remove the class binding from the scene.

      Arguments:

      1. resetoptional, default: false

        If false and the classes are currently active, they will remain on the element. If true they will be removed.

      Returns:

      1. Parent object for chaining.

      Examples:

      // remove class binding from the scene without reset
      scene.removeClassToggle();
      
      // remove class binding and remove the changes it caused
      scene.removeClassToggle(true);

      fx
      ScrollMagicScene#removePin
      • reset

      Kind
      function
      Scope
      instance

      Remove the pin from the scene.

      Arguments:

      1. resetoptional, default: false

        If false the spacer will not be removed and the element's position will not be reset.

      Returns:

      1. Parent object for chaining.

      Examples:

      // remove the pin from the scene without resetting it (the spacer is not removed)
      scene.removePin();
      
      // remove the pin from the scene and reset the pin element to its initial position (spacer is removed)
      scene.removePin(true);

      fx
      ScrollMagicScene#reverse
      • newReverse

      Kind
      function
      Scope
      instance

      Get or Set the reverse option value.

      Arguments:

      1. newReverseoptional

        The new reverse setting of the scene.

      Returns:

      1. get - Current reverse option value.

      2. set - Parent object for chaining.

      Examples:

      // get the current reverse option
      var reverse = scene.reverse();
      
      // set new reverse option
      scene.reverse(false);

      fx
      ScrollMagicScene#scrollOffset

        Kind
        function
        Scope
        instance

        Get the current scroll offset for the start of the scene.
        Mind, that the scrollOffset is related to the size of the container, if triggerHook is bigger than 0 (or "onLeave").
        This means, that resizing the container or changing the triggerHook will influence the scene's start offset.

        Returns:

        1. The scroll offset (of the container) at which the scene will trigger. Y value for vertical and X value for horizontal scrolls.

        Examples:

        // get the current scroll offset for the start and end of the scene.
        var start = scene.scrollOffset();
        var end = scene.scrollOffset() + scene.duration();
        console.log("the scene starts at", start, "and ends at", end);

        fx
        ScrollMagicScene#setClassToggle
        • element
        • classes

        Kind
        function
        Scope
        instance

        Define a css class modification while the scene is active.
        When the scene triggers the classes will be added to the supplied element and removed, when the scene is over. If the scene duration is 0 the classes will only be removed if the user scrolls back past the start position.

        Arguments:

        1. element

          A Selector targeting one or more elements or a DOM object that is supposed to be modified.

        2. classes

          One or more Classnames (separated by space) that should be added to the element during the scene.

        Returns:

        1. Parent object for chaining.

        Examples:

        // add the class 'myclass' to the element with the id 'my-elem' for the duration of the scene
        scene.setClassToggle("#my-elem", "myclass");
        
        // add multiple classes to multiple elements defined by the selector '.classChange'
        scene.setClassToggle(".classChange", "class1 class2 class3");

        fx
        ScrollMagicScene#setPin
        • element
        • settings

        Kind
        function
        Scope
        instance

        Pin an element for the duration of the tween.
        If the scene duration is 0 the element will only be unpinned, if the user scrolls back past the start position.
        Make sure only one pin is applied to an element at the same time. An element can be pinned multiple times, but only successively. NOTE: The option pushFollowers has no effect, when the scene duration is 0.

        Arguments:

        1. element

          A Selector targeting an element or a DOM object that is supposed to be pinned.

        2. settingsoptional

          settings for the pin

          • pushFollowersoptional, default: true

            If true following elements will be "pushed" down for the duration of the pin, if false the pinned element will just scroll past them.
            Ignored, when duration is 0.

          • spacerClassoptional, default: "scrollmagic-pin-spacer"

            Classname of the pin spacer element, which is used to replace the element.

        Returns:

        1. Parent object for chaining.

        Examples:

        // pin element and push all following elements down by the amount of the pin duration.
        scene.setPin("#pin");
        
        // pin element and keeping all following elements in their place. The pinned element will move past them.
        scene.setPin("#pin", {pushFollowers: false});

        fx
        ScrollMagicScene#trigger
        • name
        • vars

        Kind
        function
        Scope
        instance

        Trigger an event.

        Arguments:

        1. name

          The name of the event that should be triggered.

        2. varsoptional

          An object containing info that should be passed to the callback.

        Returns:

        1. Parent object for chaining.

        Examples:

        this.trigger("change");

        fx
        ScrollMagicScene#triggerElement
        • newTriggerElement

        Kind
        function
        Scope
        instance

        Get or Set the triggerElement option value. Does not fire Scene.shift, because changing the trigger Element doesn't necessarily mean the start position changes. This will be determined in Scene.refresh(), which is automatically triggered.

        Arguments:

        1. newTriggerElementoptional

          The new trigger element for the scene.

        Returns:

        1. get - Current triggerElement.

        2. set - Parent object for chaining.

        Examples:

        // get the current triggerElement
        var triggerElement = scene.triggerElement();
        
        // set a new triggerElement using a selector
        scene.triggerElement("#trigger");
        // set a new triggerElement using a DOM object
        scene.triggerElement(document.getElementById("trigger"));

        fx
        ScrollMagicScene#triggerHook
        • newTriggerHook

        Kind
        function
        Scope
        instance

        Get or Set the triggerHook option value.

        Arguments:

        1. newTriggerHookoptional

          The new triggerHook of the scene. See Scene parameter description for value options.

        Returns:

        1. get - Current triggerHook (ALWAYS numerical).

        2. set - Parent object for chaining.

        Examples:

        // get the current triggerHook value
        var triggerHook = scene.triggerHook();
        
        // set a new triggerHook using a string
        scene.triggerHook("onLeave");
        // set a new triggerHook using a number
        scene.triggerHook(0.7);

        fx
        ScrollMagicScene#triggerPosition

          Kind
          function
          Scope
          instance

          Get the trigger position of the scene (including the value of the offset option).

          Returns:

          1. Start position of the scene. Top position value for vertical and left position value for horizontal scrolls.

          Examples:

          // get the scene's trigger position
          var triggerPosition = scene.triggerPosition();

          fx
          ScrollMagicScene#update
          • immediately

          Kind
          function
          Scope
          instance

          Updates the Scene to reflect the current state.
          This is the equivalent to Controller.updateScene(scene, immediately).
          The update method calculates the scene's start and end position (based on the trigger element, trigger hook, duration and offset) and checks it against the current scroll position of the container.
          It then updates the current scene state accordingly (or does nothing, if the state is already correct) – Pins will be set to their correct position and tweens will be updated to their correct progress. This means an update doesn't necessarily result in a progress change. The progress event will be fired if the progress has indeed changed between this update and the last.
          NOTE: This method gets called constantly whenever ScrollMagic detects a change. The only application for you is if you change something outside of the realm of ScrollMagic, like moving the trigger or changing tween parameters.

          Arguments:

          1. immediatelyoptional, default: false

            If true the update will be instant, if false it will wait until next update cycle (better performance).

          Returns:

          1. Parent object for chaining.

          Examples:

          // update the scene on next tick
          scene.update();
          
          // update the scene immediately
          scene.update(true);

          m
          animationGSAP

          This plugin is meant to be used in conjunction with the Greensock Animation Plattform.
          It offers an easy API to trigger Tweens or synchronize them to the scrollbar movement.

          Both the lite and the max versions of the GSAP library are supported.
          The most basic requirement is TweenLite.

          To have access to this extension, please include plugins/animation.gsap.js.

          Instance Members:

          fx
          animationGSAP#Scene.removeTween
          • reset

          Remove the tween from the scene.
          This will terminate the control of the Scene over the tween.

          Using the reset option you can decide if the tween should remain in the current state or be rewound to set the target elements back to the state they were in before the tween was added to the scene.

          Arguments:

          1. resetoptional, default: false

            If true the tween will be reset to its initial values.

          Returns:

          1. Parent object for chaining.

          Examples:

          // remove the tween from the scene without resetting it
          scene.removeTween();
          
          // remove the tween from the scene and reset it to initial position
          scene.removeTween(true);

          fx
          animationGSAP#Scene.setTween
          • TweenObject
          • duration
          • params

          Add a tween to the scene.
          If you want to add multiple tweens, add them into a GSAP Timeline object and supply it instead (see example below).

          If the scene has a duration, the tween's duration will be projected to the scroll distance of the scene, meaning its progress will be synced to scrollbar movement.
          For a scene with a duration of 0, the tween will be triggered when scrolling forward past the scene's trigger position and reversed, when scrolling back.
          To gain better understanding, check out the Simple Tweening example.

          Instead of supplying a tween this method can also be used as a shorthand for TweenMax.to() (see example below).

          Arguments:

          1. TweenObject

            A TweenMax, TweenLite, TimelineMax or TimelineLite object that should be animated in the scene. Can also be a Dom Element or Selector, when using direct tween definition (see examples).

          2. duration

            A duration for the tween, or tween parameters. If an object containing parameters are supplied, a default duration of 1 will be used.

          3. params

            The parameters for the tween

          Returns:

          1. Parent object for chaining.

          Examples:

          // add a single tween directly
          scene.setTween(TweenMax.to("obj"), 1, {x: 100});
          
          // add a single tween via variable
          var tween = TweenMax.to("obj"), 1, {x: 100};
          scene.setTween(tween);
          
          // add multiple tweens, wrapped in a timeline.
          var timeline = new TimelineMax();
          var tween1 = TweenMax.from("obj1", 1, {x: 100});
          var tween2 = TweenMax.to("obj2", 1, {y: 100});
          timeline
          		.add(tween1)
          		.add(tween2);
          scene.addTween(timeline);
          
          // short hand to add a TweenMax.to() tween
          scene.setTween("obj3", 0.5, {y: 100});
          
          // short hand to add a TweenMax.to() tween for 1 second
          // this is useful, when the scene has a duration and the tween duration isn't important anyway
          scene.setTween("obj3", {y: 100});

          fx
          animationGSAP#Scene.tweenChanges
          • newTweenChanges

          Get or Set the tweenChanges option value.
          This only affects scenes with a duration. If tweenChanges is true, the progress update when scrolling will not be immediate, but instead the animation will smoothly animate to the target state.
          For a better understanding, try enabling and disabling this option in the Scene Manipulation Example.

          Arguments:

          1. newTweenChangesoptional

            The new tweenChanges setting of the scene.

          Returns:

          1. get - Current tweenChanges option value.

          2. set - Parent object for chaining.

          Examples:

          // get the current tweenChanges option
          var tweenChanges = scene.tweenChanges();
          
          // set new tweenChanges option
          scene.tweenChanges(true);

          fx
          animationGSAP#new ScrollMagic.Scene(options)
          • options

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

          Arguments:

          1. optionsoptional

            Options for the Scene. The options can be updated at any time.

            • tweenChangesoptional, default: false

              Tweens Animation to the progress target instead of setting it.
              Does not affect animations where duration is 0.

          Examples:

          var scene = new ScrollMagic.Scene({tweenChanges: true});

          m
          animationVelocity

          This plugin is meant to be used in conjunction with the Velocity animation framework.
          It offers an easy API to trigger Velocity animations.

          With the current version of Velocity scrollbound animations (scenes with duration) are not supported.
          This feature will be added as soon as Velocity provides the appropriate API.

          To have access to this extension, please include plugins/animation.velocity.js.

          Instance Members:

          fx
          animationVelocity#Scene.removeVelocity
          • reset

          Remove the animation from the scene.
          This will stop the scene from triggering the animation.

          Using the reset option you can decide if the animation should remain in the current state or be rewound to set the target elements back to the state they were in before the animation was added to the scene.

          Arguments:

          1. resetoptional, default: false

            If true the animation will rewound.

          Returns:

          1. Parent object for chaining.

          Examples:

          // remove the animation from the scene without resetting it
          scene.removeVelocity();
          
          // remove the animation from the scene and reset the elements to initial state
          scene.removeVelocity(true);

          fx
          animationVelocity#Scene.setVelocity
          • elems
          • properties
          • options

          Add a Velocity animation to the scene.
          The method accepts the same parameters as Velocity, with the first parameter being the target element.

          To gain better understanding, check out the Velocity example.

          Arguments:

          1. elems

            One or more Dom Elements or a Selector that should be used as the target of the animation.

          2. properties

            The CSS properties that should be animated.

          3. options

            Options for the animation, like duration or easing.

          Returns:

          1. Parent object for chaining.

          Examples:

          // trigger a Velocity animation
          scene.setVelocity("#myElement", {opacity: 0.5}, {duration: 1000, easing: "linear"});

          fx
          debugaddIndicators#Scene.addIndicators
          • options

          Add visual indicators for a ScrollMagic.Scene.

          Arguments:

          1. optionsoptional

            An object containing one or more options for the indicators.

            • colorEndoptional, default: red

              CSS color definition for the end indicator.

            • colorStartoptional, default: green

              CSS color definition for the start indicator.

            • colorTriggeroptional, default: blue

              CSS color definition for the trigger indicator.

            • indentoptional, default: 0

              Additional position offset for the indicators (useful, when having multiple scenes starting at the same position).

            • nameoptional, default: ""

              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.

            • parentoptional

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

          Examples:

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

          fx
          debugaddIndicators#new ScrollMagic.Controller(options)
          • options

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

          Arguments:

          1. optionsoptional

            Options for the Controller.

            • addIndicatorsoptional, default: false

              If set to true every scene that is added to the controller will automatically get indicators added to it.

          Examples:

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

          m
          frameworkjQuery

          This plugin is meant to be used in conjunction with jQuery.
          It enables ScrollMagic to make use of jQuery's advanced selector engine (sizzle) for all elements supplied to ScrollMagic objects, like scroll containers or trigger elements.
          ScrollMagic also accepts jQuery elements for all methods that expect references to DOM elements. Please note, that in most cases the first element of the matched set will be used.

          Additionally it provides the ScrollMagic object within the jQuery namespace, so it can be accessed using $.ScrollMagic.

          In contrast to most other plugins it does not offer new API additions for ScrollMagic.

          To have access to this extension, please include plugins/jquery.ScrollMagic.js.

          Examples:

          // create a new scene making use of jQuery's advanced selector engine
          var scene = new $.ScrollMagic.Scene({
            triggerElement: "#parent div.trigger[attr='thisone']:not(.notthisone)"
          });