https://github.com/scroll-out/scroll-out

ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects!
https://github.com/scroll-out/scroll-out

animation css css-classes javascript scroll-events scrolling transition

Last synced: 14 days ago
JSON representation

ScrollOut detects changes in scroll for reveal, parallax, and CSS Variable effects!

• Host: GitHub
• URL: https://github.com/scroll-out/scroll-out
• Owner: scroll-out
• Created: 2017-08-19T20:54:03.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-01-14T16:21:12.000Z (over 1 year ago)
• Last Synced: 2025-04-01T13:09:11.398Z (22 days ago)
• Topics: animation, css, css-classes, javascript, scroll-events, scrolling, transition
• Language: TypeScript
• Homepage: https://scroll-out.github.io/
• Size: 590 KB
• Stars: 1,223
• Watchers: 26
• Forks: 122
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGE.md

Awesome Lists containing this project

• awesome-list - scroll-out - out | 1088 | (TypeScript)

README

        
# ScrollOut

*Animate on Scroll*

[![npm version](https://badge.fury.io/js/scroll-out.svg)](https://badge.fury.io/js/scroll-out) [![Downloads](https://img.shields.io/npm/dm/scroll-out.svg)](https://www.npmjs.com/package/scroll-out)

[![gzip size](http://img.badgesize.io/https://unpkg.com/scroll-out/dist/scroll-out.min.js?compression=gzip&label=gzip%20size&style=flat&cache=false)](https://unpkg.com/scroll-out/dist/scroll-out.min.js) 

## Why should I use this?

- Animate or reveal elements as they scroll into view using CSS or JavaScript

- Super tiny JavaScript library at 1KB minified and gzipped.

- Free for commercial and non-commercial use under the MIT license.

## How do I use it?

Install ScrollOut and decorate elements with the ```data-scroll``` attribute.  As elements become visible, ```data-scroll``` will be set to ```in``` and when elements are scrolled out they will be set with ```out```.  Add your own CSS or JS to make a big impression when things come into view.  That's it!

## Getting Started

Check out the [documentation](https://scroll-out.github.io/).

## Compatibility

The core features are compatible on all modern desktop and mobile browsers.  Internet Explorer 11 is also supported.

## Maintainers

| Maintainer | GitHub | Twitter |

| :- | :- | :- |

| Christopher Wallis | [@notoriousb1t](https://github.com/notoriousb1t) | [@notoriousb1t](https://twitter.com/notoriousb1t) |

| Stephen Shaw | [@shshaw](https://github.com/shshaw) | [@shshaw](https://twitter.com/shshaw) |

## License

scroll-out is licensed under the [MIT license](http://opensource.org/licenses/MIT).