{"id":30420672,"url":"https://github.com/skybrud/sky-appear","last_synced_at":"2026-02-10T23:05:15.606Z","repository":{"id":51667510,"uuid":"149022017","full_name":"skybrud/sky-appear","owner":"skybrud","description":"Vue directive plugin for adding class to elements entering the viewport","archived":false,"fork":false,"pushed_at":"2022-12-09T11:13:41.000Z","size":269,"stargazers_count":2,"open_issues_count":12,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-08-22T08:26:24.223Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/skybrud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-16T18:05:58.000Z","updated_at":"2021-08-25T14:25:18.000Z","dependencies_parsed_at":"2023-01-25T13:30:51.696Z","dependency_job_id":null,"html_url":"https://github.com/skybrud/sky-appear","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/skybrud/sky-appear","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-appear","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-appear/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-appear/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-appear/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skybrud","download_url":"https://codeload.github.com/skybrud/sky-appear/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-appear/sbom","scorecard":{"id":830480,"data":{"date":"2025-08-11","repo":{"name":"github.com/skybrud/sky-appear","commit":"84cf2cc6bcd9b1c942de73c6086ef99918f17877"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/26 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"45 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-779f-wgxg-qr8f","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx","Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T17:39:23.514Z","repository_id":51667510,"created_at":"2025-08-23T17:39:23.515Z","updated_at":"2025-08-23T17:39:23.515Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29321276,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T20:44:44.282Z","status":"ssl_error","status_checked_at":"2026-02-10T20:44:43.393Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2025-08-22T08:19:50.416Z","updated_at":"2026-02-10T23:05:15.584Z","avatar_url":"https://github.com/skybrud.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `sky-appear`\n\nRenderless wrapper Vue component for exposing style classes to elements based on their position in relation to the viewport.\n\n## Installation\n\n``` bash\nnpm install sky-appear\n```\n\nor\n\n``` bash\nyarn add sky-appear\n```\n\nThis package depends on the [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) API which needs a polyfill for old browsers, including all of IE. Consider using the [W3C IntersectionObserver polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).\n\n## Using the wrapper component\n\nImport and install the SkyAppear wrapper component:\n\n``` js\nimport Vue from 'vue';\nimport { SkyAppear } from 'sky-appear';\n\nexport default {\n\tname: 'ExampleComponent',\n\tcomponents: { SkyAppear },\n\tmounted() {\n\t\tconsole.log('Example component loaded');\n\t},\n};\n```\n\nAlternatively SkyAppear can be installed globally:\n\n``` js\nimport Vue from 'vue';\nimport SkyAppear from 'sky-appear';\n\nVue.use(SkyAppear);\n```\n\n### Basic wrapper example\n\nThe wrapper component adds the class `sky-appear` to the wrapped element when the dom is loaded and the wrapper component is active. Supplementary classes are then added or removed depending on the element’s relation to the viewport.\n\n* When the element enters the viewport the class `sky-appear--inside-viewport` is added.\n* When the element is outside the viewport the class `sky-appear--outside-viewport` is added.\n* When the element is positioned before the viewport the class `sky-appear--outside-viewport--before` is added\\* in addition to the `sky-appear--outside-viewport` class.\n* When the element is positioned after the viewport the class `sky-appear--outside-viewport--after` is added\\* in addition to the `sky-appear--outside-viewport` class.\n\n\\*The before and after classes will only be set when direction is either \"inline\" or \"block\". When the direction is \"both\" a before or after situation cannot be determined.\n\n``` html\n\u003c!-- As written in Vue --\u003e\n\u003cSkyAppear\u003e\n\t\u003cdiv class=\"test-element\"\u003e\n\t\tShow only when entering the viewport\n\t\u003c/div\u003e\n\u003c/SkyAppear\u003e\n\n\u003c!-- As it may appear in the dom --\u003e\n\u003cdiv class=\"test-element sky-appear sky-appear--outside-viewport sky-appear--outside-viewport--after\"\u003e\n\tShow only when entering the viewport\n\u003c/div\u003e\n```\n\nNote that only one top-level element should be active within the wrapper at any given time.\n\n### Full wrapper example\n\nThe full example below showcases all the functionalities of the wrapper component.\n\n``` html\n\u003c!-- As written in Vue --\u003e\n\u003cdiv ref=“newRoot”\u003e\n\t\u003cSkyAppear\n\t\t:active=\"isActive\"\n\t\t:direction=\"'inline'\"\n\t\t:options=\"{\n\t\t\tinitState: 'outside',\n\t\t\tclassless: true,\n\t\t\tappearOnce: false,\n\t\t\ttriggerEvents: [\n\t\t\t\t'resize',\n\t\t\t\t{ name: 'scroll', target: $refs.newRoot },\n\t\t\t],\n\t\t\troot: $refs.newRoot,\n\t\t\trootMargin: '10% 10%',\n\t\t\tthresholds: [0, .25, .5, .75, 1],\n\t\t\tdelay: 'animationFrame',\n\t\t}\"\n\t\t@enter=\"enterHandling\"\n\t\t@leave=\"leaveHandling\"\n\t\t@update=\"updateHandling\"\n\t\u003e\n\t\t\u003cdiv class=\"test-element\" v-slot=\"{ isIntersecting, intersectionRatio }\"\u003e\n\t\t\t\u003cp\n\t\t\t\tv-if=\"isIntersecting\"\n\t\t\t\t:style=\"{\n\t\t\t\t\ttransform: 'translate3d(' + (intersectionRatio * 10) + '%, 0, 0),\n\t\t\t\t}\"\n\t\t\t\u003e\n\t\t\t\tShow only when entering the viewport - is intersecting: {{ isIntersecting }}\n\t\t\t\u003c/p\u003e\n\t\t\t\u003cp v-else\u003e\n\t\t\t\tNot yet there - is intersecting: {{ state }}\n\t\t\t\u003c/p\u003e\n\t\t\u003c/div\u003e\n\t\u003c/SkyAppear\u003e\n\u003c/div\u003e\n\n\u003c!-- As it may appear in the dom --\u003e\n\u003cdiv\u003e\n\t\u003cdiv class=\"test-element\"\u003e\n\t\t\u003cp style=\"transform: translate3d(12.5%, 0, 0);\"\u003e\n\t\t\tShow only when entering the viewport - is intersecting: true\n\t\t\u003c/p\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Props overview\n\nThere is only a few props to use, as a lot of the setup is done using an options-object passed into the options-prop. In short, the remaining props (active, direction) are the only ones you should change dynamically. The options-prop is best left unchanged after mount.\n\n| Prop | Description | Default value | Data type |\n| ---- | ----------- | ------------- | --------- |\n| active | Whether or not the wrapper is active and currently detecting. A value of false will also remove the wrapper classes. | true | Boolean |\n| direction | Whether to detect viewport intersection vertically (‘block’), horizontally (‘inline’) or in both directions ('both'). This means when in block-mode the `--outside-viewport--before` class modifier is set when the element is above the viewport, and the `--outside-viewport--after` modifier is when below. When in inline-mode ‘before’ is left and ‘after’ is right. Before and after will not be set when 'both' is selected. | ‘block’ | String |\n| options | Options set when the component is first mounted. See the overview below. | {} | Object |\n\n### Options overview\n\nAll the properties in the options-prop are values, that should be set on mount and then left alone.\n\n| Property | Description | Default value | Data type |\n| -------- | ----------- | ------------- | --------- |\n| initState | The initiary state before any detection is done. A value of 'inside' will have the element starting with the `--inside-viewport` class modifier, and 'outside' will have it start without it. 'before' will have it start with the `--outside-viewport--before` class modifier, and 'after' will have it start with the `--outside-viewport--after` class modifier. | 'inside' | String |\n| appearOnce | If set to true, the `--inside-viewport` class modifier will be set only once to never be removed again. Internally tracking of intersections will stop when this happens. | true | Boolean |\n| triggerEvents | An array of which events the internal update-function should also run on, other than on the intersection updates. This can be used for smoother gradients of values.\\* | [] | Array |\n| root | The root of the intersection observer. [Read more.](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) | null / viewport | Object |\n| rootMargin | The root margin of the intersection observer. [Read more.](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) | ‘0px 0px 0px 0px’ | String |\n| thresholds | The thresholds of the intersection observer. [Read more.](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds) | [0] | Array |\n| delay | Set a delay between polling of intersections and trigger events. This can either be a number (miliseconds) or the string 'animationFrame' to utilize \\`window.requestAnimationFrame()\\`. | 0 | Number or String |\n\n\\*The trigger events can either just be the event name as a string or an object. If an object, it shall have a \\`name\\` property (this being the event name), but may also have a \\`target\\` property (the caller of the event, defaults to window) an \\`options\\` property which will be passed to the event.\n\n### Events overview\n\n| Event | Description |\n| ----- | ----------- |\n| enter | Event triggering when the wrapper content enters into the viewport. The element needs only be partially within the viewport. |\n| leave | Event triggering when the wrapper content leaves the viewport. The element needs to leave the viewport fully. |\n| update | Event triggering whenever the viewport changes while the wrapper content is within view. This event will also be triggered by events set by the `triggerEvents` option. |\n\nEach of the event types pass an event object when called upon, and structurally the event object will be the same no matter the event. The object will contain the following properties:\n\n| Property | Description |\n| -------- | ----------- |\n| target | A reference to the element currently observed. |\n| intersectionRatio | A value going from 0 (fully out of view) to 1 (fully in view). |\n| intersectionJourney | A value going from 0 (fully outside after view) to 1 (fully outside before view). |\n| isIntersecting | Boolean value telling if the target is either fully or partially inside the viewport. |\n| isBeforeViewport | Boolean value telling whether the target is outside the view in the before-direction (left or upwards depending on set direction). |\n| isAfterViewport | Boolean value telling whether the target is outside the view in the after-direction (right or downwards depending on set direction). |\n| boundingClientRect | Returns the bounds rectangle of the target element as a DOMRectReadOnly. |\n| intersectionRect | Returns a DOMRectReadOnly representing the target’s visible area. |\n| rootBounds | Returns a DOMRectReadOnly for the intersection observer’s root. |\n| time | A DOMHighResTimeStamp indicating the time at which the intersection was recorded, relative to the IntersectionObserver’s time origin. |\n\n## Exposed slot props\n\nOther than listening to the events and looking at the classes, the wrapper also exposes a set of properties to be utilized.\nThe exposed props are a selection of the data present in the events: The `intersectionRatio`, `intersectionJourney`, `isIntersecting`, `isBeforeViewport` and `isAfterViewport`.\n\n## General notes\n\nThis wrapper have four main parts, which needs to speak together for it to work.\n\n1. The intersection observer. This needs to be updated, if the options change, and it needs to update the observed element if it changes.\n2. The classes. These need to actively change based on the current situation, but not more than necessary, as too many DOM-changes can become slow.\n3. The trigger events. These should only be active when they are needed. Also they shall not generate the data for observations (element bounds, calculated intersection ratio, etc.) when it is not needed (for example, if there is a delay set, it shouldn't calculate anything before the delay is reached).\n4. The slotted element. Which can change or be non-existant.\n\nThese four parts all have an effect on each other, and if one changes then often the others need to change as well. If bugs are encountered, it is of high likelyhood happening in the intersection bewteen two or more of these parts.\n\n## Notes on possible improvement\n\n* Add global options to be used as defaults.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-appear","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskybrud%2Fsky-appear","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-appear/lists"}