By @louisho5


MotionScroll JS Documentation

⬇️ Scroll Down ⬇️

[Example 1] - Basic

Start your own customized scroll animation with single line of code.

[Example 2] - Use of "data-motionscroll-to"

This example demonstrates how to add simple animations using the "data-motionscroll-to" attribute.

😻

[Example 3] - Use of "data-motionscroll-animate"

In this example, you can add custom "keyframes-like" CSS animations using the "data-motionscroll-animate" attribute.

[Example 4] - Layer

Assign animations to a designated layer instead of automatically selecting [data-motionscroll-to] and [data-motionscroll-animate].

[Example 5] - Ease

All ease modes refer to the CSS transition-timing-function. You can customize the easing effect using the ease option.

[Example 6] - Offset

Set offsets for top or bottom to affect the delay of the container's entry or exit.

🌛

[Example 7] - Reverse

By default, the animation stops when the container leaves the top of the screen. Set reverse to false to allow the animation to play again when scrolled from the top.

[Example 8] - Play Once Only

In this example, the animation stops permanently when the container leaves the top of the screen.

🚗

[Example 9] - Override Style

Add "!important" to all MotionScroll CSS animations using the override option.

🚀

[Example 10] - Destroy / Init

Example shows how to destroy/initialize the motionscroll

🐈


All Parameters

All parameters and each default values in MotionScroll.

Free to use and modify motionscroll.js under the MIT License

Learn more on Github💻