{"id":21525812,"url":"https://github.com/bkwld/vue-in-view","last_synced_at":"2025-08-12T01:23:48.756Z","repository":{"id":60724984,"uuid":"483284805","full_name":"BKWLD/vue-in-view","owner":"BKWLD","description":"Vue component for triggering animations, adding classes, firing events, and syncing slot variables based on visibility in the viewport.","archived":false,"fork":false,"pushed_at":"2023-10-27T02:26:20.000Z","size":5557,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-03T15:42:37.832Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://vue-in-view.netlify.app","language":"JavaScript","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/BKWLD.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-19T14:38:09.000Z","updated_at":"2023-08-12T15:04:10.000Z","dependencies_parsed_at":"2025-04-09T23:38:14.062Z","dependency_job_id":null,"html_url":"https://github.com/BKWLD/vue-in-view","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/BKWLD/vue-in-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-in-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-in-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-in-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-in-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BKWLD","download_url":"https://codeload.github.com/BKWLD/vue-in-view/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BKWLD%2Fvue-in-view/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269983755,"owners_count":24507661,"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","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"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":[],"created_at":"2024-11-24T01:38:31.899Z","updated_at":"2025-08-12T01:23:48.680Z","avatar_url":"https://github.com/BKWLD.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-in-view\n\nVue component for triggering animations, adding classes, firing events, and syncing slot variables based on visibility in the viewport.\n\n- [View demo](https://vue-in-view.netlify.app)\n- [Edit CodeSandbox](https://githubbox.com/BKWLD/vue-in-view)\n\n## Install\n\n```sh\nyarn add @bkwld/vue-in-view\n```\n\n### Default\n\n```js\nimport InView from '@bkwld/vue-in-view'\nVue.component 'in-view', InView\n```\n\n### Nuxt\n\n```js\n// nuxt.config.js\nexport default {\n  buildModules: [ '@bkwld/vue-in-view/nuxt' ]\n}\n```\n\n## Usage\n\nUse the `animate` prop to have `vue-in-view` reset CSS animations when the component does not mount within the viewport.  When the user scrolls far enough to reveal the component, the animations will begin from the start. This is the primary use case of `vue-in-view`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cin-view animate class=\"box\" /\u003e\n\u003c/template\u003e\n\u003cstyle\u003e\n.box {\n  animation: box-intro 1s both;\n}\n@keyframes box-intro {\n  to {\n    background: pink;\n  }\n}\n\u003c/style\u003e\n```\n\nFor more examples, check out [the demo](https://vue-in-view.netlify.app).\n\n## API\n\n### Props\n\n| **Prop**    | **Default**   | **Description**\n|-------------|---------------|----------------\n| `animate`   | `false `      | Reset CSS animations when hidden and play them when visible.\n| `classes`   | `false`       | Adds `hidden` class when hidden and `visible` when visible.\n| `once`      | `false`       | Stops watching for viewport changes after the first instance of the component being visible.\n| `when`      | `0%`          | A px or % value for delaying when the visible effect is applied. Can be a number (`.25` for `25%`, 200 for `200px`) or a string. This is used to set the [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) and, as such, only `px` and `%` values are supported.\n| `target`    | `descendants` | Only used with `animate`, this controls which elements' animations are controlled.  May be `descendants` (self and all descendant elements), `children` (just the immediate children), or `self` (just animations applied to the `vue-in-view` component).\n\n### Slots\n\n| **Slot**    | **Description**\n|-------------|----------------\n| `default`   | **Slot props:**\n|             | `visible` - True when `in-view` is visible.\n\n### Events\n\n| **Event**   | **Description**\n|-------------|----------------\n| `visible`   | Fired when `in-view` intersects the viewport.\n| `hidden`    | Fired when not visible.\n\n\n## Contributing\n\nRun `yarn dev` to open a Nuxt dev build of [the demo directory](./demo).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fvue-in-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbkwld%2Fvue-in-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbkwld%2Fvue-in-view/lists"}