{"id":24383403,"url":"https://github.com/firstandthird/scroll-triggers","last_synced_at":"2025-12-25T10:56:52.714Z","repository":{"id":11185574,"uuid":"68667677","full_name":"firstandthird/scroll-triggers","owner":"firstandthird","description":"Javascript library to trigger various things as a user scrolls down the page","archived":false,"fork":false,"pushed_at":"2022-12-06T14:33:53.000Z","size":1010,"stargazers_count":14,"open_issues_count":11,"forks_count":3,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-04T09:40:27.526Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/firstandthird.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-20T02:52:57.000Z","updated_at":"2023-06-17T10:36:45.000Z","dependencies_parsed_at":"2023-01-13T16:22:27.796Z","dependency_job_id":null,"html_url":"https://github.com/firstandthird/scroll-triggers","commit_stats":null,"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fscroll-triggers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fscroll-triggers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fscroll-triggers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/firstandthird%2Fscroll-triggers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/firstandthird","download_url":"https://codeload.github.com/firstandthird/scroll-triggers/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243259001,"owners_count":20262375,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-19T10:14:25.186Z","updated_at":"2025-12-25T10:56:52.674Z","avatar_url":"https://github.com/firstandthird.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# scroll-triggers ![npm](https://img.shields.io/npm/v/scroll-triggers.svg)\n\nA tiny, dependency-less javascript library to add classes as elements scroll into viewport.\n\n## Features\n\n* Add a class when an element comes into view (great for animations)\n* Set an image when an element comes into view (great for lazy loading)\n* Set the width of an element based on scroll % (great for scroll progress bars)\n* API for both HTML and Javascript\n\n## Install\n\n```sh\nnpm install scroll-triggers\n```\n\n## Setup\n\n```javascript\nimport 'scroll-triggers';\n\n// alternative\nimport scrollTriggers from 'scroll-triggers';\n```\n\n## Events\n\nCustom events are fired/listened on the element:\n\n| Event                      | Type     | Description             |\n|----------------------------|----------|-------------------------|\n| `scrolltriggers:inView`    | Fired    | Element is in view      |\n| `scrolltriggers:outOfView` | Fired    | Element is out of view  |\n| `scrolltriggers:pause`     | Listened | Pauses scroll-triggers  |\n| `scrolltriggers:resume`    | Listened | Resumes scroll-triggers |\n\n## Options\n\nList of available options:\n\n| Name          | Type                                              | Description                                                              |\n|---------------|---------------------------------------------------|--------------------------------------------------------------------------|\n| `className`   | _{string}_                                        | Class to be added/removed when element is in view                        |\n| `start`       | _{string\\|Element\\|NodeList}_ CSS Selector        | Add class when the specified element is in view                          |\n| `end`         | _{string\\|Element\\|NodeList}_ CSS Selector        | Removes class when the specified element is in view                      |\n| `position`    | _{string = 'bottom'}_ \"top\\|middle\\|bottom\"       | Add class at when element hits the specified position of page            |\n| `positionEnd` | _{string = 'bottom'}_ \"auto\\|top\\|middle\\|bottom\" | Removes class when specified element hits the specified position of page |\n| `offset`      | _{number}_                                        | The offset controls the distance (negative or positive) between the top border of the element and the top border of the window. This is useful to fine tune when a class is added. |\n| `image`       | _{string}_ Path to image                          | Set an image when an element comes into view, if the element is an \u003cimg\u003e it will set it as the src, otherwise it will be set as `background-image`                             |\n| `src`         | _{string}_ Path to resource                       | Set the `src` property when an element comes into view                   |\n| `srcset`      | _{string}_ Path to resource                       | Set the `srcset` property when an element comes into view                |\n| `progress`    | _{boolean = false}_                               | Set the width of an element based on scroll %                            |\n| `once`        | _{boolean = true}_                                | Whether scroll-triggers should be executed once or not                   |\n| `fixed`        | _{boolean = true}_                               | Needed for fixed (`position: fixed`) elements                            |\n| `inView`      | _{function}_                                      | Callback executed when element is in view                                |\n| `outOfView`   | _{function}_                                      | Callback executed when element is out view                               |\n\n## Usage\n\nSee [the example](example/index.html).\n\n### HTML\n\nAdd class when element is in view.\n\n```html\n\u003cdiv data-scroll data-scroll-class=\"class-to-add\"\u003e\u003c/div\u003e\n```\n\nAdd class when another element is in view\n\n```html\n\u003cdiv data-scroll data-scroll-class=\"class-to-add\" data-scroll-start=\".some .selector\"\u003e\u003c/div\u003e\n```\n\nAdd class when another element is in view and remove when it gets to another element\n\n```html\n\u003cdiv data-scroll data-scroll-class=\"class-to-add\" data-scroll-start=\".some .selector\" data-scroll-end=\".some .lower .selector\"\u003e\u003c/div\u003e\n```\n\nAdd class at when element hits bottom of page\n\n```html\n\u003cdiv data-scroll data-scroll-class=\"class-to-add\" data-scroll-position=\"bottom\"\u003e\u003c/div\u003e\n```\n\nAdd class at when element hits middle of page\n\n```html\n\u003cdiv data-scroll data-scroll-class=\"class-to-add\" data-scroll-position=\"middle\"\u003e\u003c/div\u003e\n```\n\nSet an image when an element comes into view as a background image\n\n```html\n\u003cdiv data-scroll data-scroll-image=\"/path/to/image.jpg\"\u003e\u003c/div\u003e\n\n\u003c!--\n  This will generate the markup below:\n  \u003cdiv data-scroll data-scroll-image=\"/path/to/image.jpg\" style=\"background-image: url('/path/to/image.jpg'); background-repeat: no-repeat;\"\u003e\u003c/div\u003e\n--\u003e\n\n```\n\nSet the width of an element based on scroll % (great for progress bars)\n\n```html\n\u003cdiv data-scroll data-scroll-progress\u003e\u003c/div\u003e\n```\n\nSet the `src` property when an element comes into view (great for lazy load)\n\n```html\n\u003ciframe data-scroll data-scroll-src=\"https://wikipedia.org/wiki/Main_Page\"/\u003e\u003c/iframe\u003e\n```\n\nSet the `srcset` property when an element comes into view (great for lazy load)\n\n```html\n\u003cpicture\u003e\n  \u003csource media=\"(min-width: 650px)\" data-scroll data-scroll-srcset=\"http://placehold.it/465x465?text=Min-650\" /\u003e\n\u003c/picture\u003e\n```\n\n### JavaScript\n\n```javascript\nimport scrollTriggers from 'scroll-triggers';\n\nscrollTriggers([\n  {\n    el: '.some-selector',\n    start: '.selector',\n    end: '.selector',\n    className: 'class-to-add',\n    image: 'image/path.jpg',\n    src: 'http://url-to-resource.com',\n    srcSet: 'http://url-to-resource.com',\n    position: 'top|middle|bottom',\n    positionEnd: 'auto|top|middle|bottom',\n    offset: -20,\n    progress: true|false,\n    once: true|false,\n    fixed: true|false,\n    inView: (el, options) =\u003e {},\n    outOfView: (el, options) =\u003e {}\n  }\n]);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirstandthird%2Fscroll-triggers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffirstandthird%2Fscroll-triggers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffirstandthird%2Fscroll-triggers/lists"}