Reveal Elements With 19 CSS3 Powered Animations – ScrollJS

Preview:

Description:

ScrollJS is a tiny JavaScript library that provides a 19 CSS3 powered reveal animations for any elements when scrolling.

Animations Included:

1. fade
2. fade-up
3. fade-down
4. fade-left
5. fade-right
6. fade-up-left
7. fade-down-left
8. fade-down-right
9. fade-up-right
10. flip-left
11. flip-up
12. flip-right
13. flip-up-right
14. flip-down-right
15. flip-up-left
16. flip-down-left
17. flip-down
18. scale-up
19. scale-down

How to use it:

1. Install & Download the library.

# NPM
$ npm i @samsiri/scrolljs --save

2. Load the necessary stylesheet ‘scrolljs.css’ in the document.

<link rel="stylesheet" href="scrolljs.css" />

3. Import the scrolljs.

import scrolljs from '@samsiri/scrolljs';

4. Or load the ‘scrolljs.js’ in the document.

<script src="scrolljs.js"></script>

5. Assign a reveal animation to an element using the ‘scrolljs’ attribute:

<h2 scrolljs="scale-up">Keep Scrolling</h2>

6. Apply the duration and easing options to the reveal animation:

<h2 scrolljs="scale-up|3000|linear">Keep Scrolling</h2>