{"id":27174039,"url":"https://github.com/bmoren/scrollyclasser","last_synced_at":"2026-05-01T16:36:17.895Z","repository":{"id":71516029,"uuid":"572559581","full_name":"bmoren/scrollyclasser","owner":"bmoren","description":"a very lightweight class / css animation \u0026 transition based scrollytelling library","archived":false,"fork":false,"pushed_at":"2024-04-04T21:56:54.000Z","size":6,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T11:49:49.921Z","etag":null,"topics":["animation","css","css-animations","css-classes","intersection-observer","intersectionobserver","inview","news","paralax","saljs","scroll","scrolling","scrollytelling","storytelling","student","teaching"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bmoren.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-30T14:35:06.000Z","updated_at":"2023-02-08T17:22:21.000Z","dependencies_parsed_at":"2025-04-09T11:49:00.847Z","dependency_job_id":null,"html_url":"https://github.com/bmoren/scrollyclasser","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bmoren/scrollyclasser","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmoren%2Fscrollyclasser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmoren%2Fscrollyclasser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmoren%2Fscrollyclasser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmoren%2Fscrollyclasser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bmoren","download_url":"https://codeload.github.com/bmoren/scrollyclasser/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bmoren%2Fscrollyclasser/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32505109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animation","css","css-animations","css-classes","intersection-observer","intersectionobserver","inview","news","paralax","saljs","scroll","scrolling","scrollytelling","storytelling","student","teaching"],"created_at":"2025-04-09T11:38:50.367Z","updated_at":"2026-05-01T16:36:17.877Z","avatar_url":"https://github.com/bmoren.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# scrollyclasser\n\n#### A lightweight scrollytelling library for adding and removing classes\nscrollyclasser uses the intersection observer API to add and remove classes from elements when they enter / exit the viewport\n\nSee a Demo project on 🎏 Glitch.com: \nhttps://glitch.com/edit/#!/intersection-observer-starter-kit\n\n## Adding scrollyclasser to your project\nAdd scrollyclasser.js to the very bottom of your page just before the closing `\u003c/body\u003e` tag\n\n__using a CDN:__\n\n```html \n\u003cscript src=\"https://cdn.jsdelivr.net/gh/bmoren/scrollyclasser/scrollyclasser.js\"\u003e\u003c/script\u003e\n\u003c!-- This should be just above your closing \u003c/body\u003e tag --\u003e\n ```\n\n ## using scrollyclasser\n\n ### making an element ovservable\n Add the class `observe` to any element to make it observable by scrollyclasser\n\n ```html\n    \u003cp class=\"observe\"\u003e I'm being watched!\u003c/p\u003e\n ```\n\n You can add additional classes with the space seperator,  no problem...\n\n  ```html\n    \u003cp class=\"observe specialStyles\"\u003e I'm being watched!\u003c/p\u003e\n ```\n\n ### Adding classes to an element when it comes into view\nAdd the data attribute `data-enter-add` followed by any class names you'd like to add when the element comes into view\n\n```html\n    \u003cp class=\"observe specialStyles\" data-enter-add=\"spin fadeIn\"\u003e I'm being watched!\u003c/p\u003e\n    \u003c!-- adds the spin and fadeIn classes when the element comes into view --\u003e\n```\n\n\n ### Removing classes from an element when it leaves view\nAdd the data attribute `data-exit-remove` followed by any class names you'd like to remove when the element leaves view. Optionally, you can choose to not specify this data attribute if you do not want to remove the classes.\n\n ```html\n    \u003cp class=\"observe specialStyles\" data-enter-add=\"spin fadeIn\"  data-exit-remove=\"spin fadeIn\"\u003e I'm being watched!\u003c/p\u003e\n    \u003c!-- adds the spin and fadeIn classes when the element comes into view \u0026 removes them when it leaves view --\u003e\n```\n## Targeting other elements on the page!\nYou can also have classes added / removed from a target element when an observable element enters the page. This opens new opportunites for dynamics and expression!\n\n ### Adding classes to a target to an element when it comes into view\nAdd the data attribute `data-enter-target` to choose a target class of an element on the page you'd like to target\nAdd the data attribute `data-target-add` to choose a class you'd like to add to the element that was targeted\nor\nAdd the data attribute `data-target-remove` to choose a class you'd like to remove to the element that was targeted\n\n\n```html\n   \u003cp class=\"observe specialStyles\" data-enter-target=\"snow\"  data-target-add=\"spin\" \u003e I'm being watched!\u003c/p\u003e\n\n   \u003cdiv class=\"snow\"\u003e \u003c/div\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmoren%2Fscrollyclasser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmoren%2Fscrollyclasser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmoren%2Fscrollyclasser/lists"}