Scrollify. Do things on scroll. 4KB minified and gzipped. There are no dependencies; you do not need jQuery; you do not need TweenMax.
Well, whatever you want. Common effects such as parallax or toggling a class on/off are possible and bundled within. However, you may also easily create your own custom scroll function, and pass it in to Scrollify. The built-in effects include:
Scrollify works by first calculating an element's position in the page so that it may be manipulated on scroll. It is important to note that as the page loads, this position may jump around as the DOM is constructed and images are loaded, etc. Therefore, it is recommended that Scrollify'd elements are not initialized until the page has finished loading all images and the DOM is stable. For example, if you're trying to Scrollify an element whose position on the page is dependent on assets loading above of it, you may wish to use
window.addEventListener('load'... rather than the more common
First, install dependencies and spin up a webserver via
npm i && npm start. Navigate to
localhost:8080/demo to check out the demos. Code samples are therein.
npm i @hugeinc/scrollify