ScrollMagic

Plugin: Velocity

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.

Source:

Requires

Scene Control Methods

Scene.removeVelocity(reset) → {Scene}

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.

Parameters:
Name Type Argument Default Description
reset boolean <optional>
 false

If true the animation will rewound.
Source:
Returns:

Parent object for chaining.

{ Scene }
Example
// 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);

Scene.setVelocity(elems, properties, options) → {Scene}

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.

Parameters:
Name Type Description
elems object | string

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

The CSS properties that should be animated.
options object

Options for the animation, like duration or easing.
Source:
Returns:

Parent object for chaining.

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