Scrollmotion

A JavaScript library for screen-intersected animations on page scroll.

Scroll down

Features

Simple and lightweight.
Only ~1KB (gzipped).

Written in TypeScript.
Compiled to ES6.

Native JavaScript.
No jQuery required.

Easy to configure.
Options and callbacks.

CSS animations.
Based on Animate.css.

Uses Web APIs.
IntersectionObserver.

Usage

1. Link the CSS-file of Animate.css.

<link rel="stylesheet" href="your/path/to/animate.min.css"/>

2. Link the JavaScript-file of the library and add an initial JavaScript-code to start it.

<script src="your/path/to/scrollmotion.min.js"></script>
<script>
    const sm = Scrollmotion('.sm-item');
    sm.start();
</script>

3. Add sm-item as CSS class and one of the CSS classes from Animate.css as data attribute data-sm-animate-class to each website component you want to get animated, when it got intersected on page scroll.

<div class="sm-item" data-sm-animate-class="animate__backInLeft">
    <!-- your content -->
</div>

4. Scroll on your website and enjoy the animations.

Note: For guide on using and configuring Scrollmotion, visit GitHub.

License

Scrollmotion is licensed under the MIT license.

But if you would like to see this library develop further, or if you want to support me or show me your appreciation, please donate any amount through PayPal. Thank you! 🍻

Support

You can use GitHub issues to post bugs reports and feature suggestions. If you are having problems using Scrollmotion, please post a question to Stack Overflow using scrollmotion, javascript and intersectionobserver as tags.

Important: Whether you're submitting a bug report or asking for help at Stack Overflow, please try to include an example demonstrating your problem.