Ballet

The typescript library for scroll animation.

Examples

Click here to see all the examples

Module System Types

• ES6
• UMD

Layout methods

• FixedActorsScene

const scene = new StickyPlatformScene(
    document.getElementById('scene'),
    (w, h) => h * 2,
);

Here is an example of using this method.

• StickyPlatformScene

const scene = new StickyPlatformScene(
    document.getElementById('scene'),
    (w, h) => h * 2,
);

This method also has an offset and stickyPlatformHeight options. To see an example of using these options click here.

Motions

• MoveMotion
• SizeMotion
• OpacityMotion
• BoundMotion

Actors

• StaticActor should have MoveMotion, SizeMotion and OpacityMotion in its TimeFrame to calc start/end values. You can also set false into initPosition, initSize, initOpacity to prevent this behavior:

const agenda = new StaticActor(document.getElementById('agenda'), {
    initOpacity: false,
});

• RefActor doesn't change its coordinates and sizes.

Built With

• Vanilla JS
• TypeScript
• webpack

Author

• Nikolay Grishkin - Initial work - GitHub

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE file for details.