{"id":23046436,"url":"https://github.com/quelchx/aos-vue","last_synced_at":"2025-10-16T20:18:10.622Z","repository":{"id":57181139,"uuid":"377159934","full_name":"quelchx/aos-vue","owner":"quelchx","description":"Lightweight animate on scroll component for Vue.js","archived":false,"fork":false,"pushed_at":"2024-03-17T15:16:01.000Z","size":286,"stargazers_count":10,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-24T18:09:31.344Z","etag":null,"topics":["animation"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/aos-vue","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/quelchx.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-15T12:46:07.000Z","updated_at":"2025-06-23T01:47:26.000Z","dependencies_parsed_at":"2022-09-14T03:50:31.310Z","dependency_job_id":null,"html_url":"https://github.com/quelchx/aos-vue","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/quelchx/aos-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quelchx%2Faos-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quelchx%2Faos-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quelchx%2Faos-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quelchx%2Faos-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/quelchx","download_url":"https://codeload.github.com/quelchx/aos-vue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/quelchx%2Faos-vue/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265512114,"owners_count":23779864,"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":["animation"],"created_at":"2024-12-15T22:24:32.448Z","updated_at":"2025-10-16T20:18:05.590Z","avatar_url":"https://github.com/quelchx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AOS Vue\n\nVue 3 lightweight animate on scroll component.\n\n### Notes:\n\nThis package utilizes a library called aos.js, which you can find [here](https://www.npmjs.com/package/aos). The design of This component is to leverage the aos.js library and its features -- but more customized towards the Vue way.\n\nThis package was built using [Rollup](https://www.npmjs.com/package/vue-sfc-rollup). Other than using what comes default with this package -- they are no other dependencies this project relies on (other than aos.js).\n\n### Prerequisites\n\n- Vue v.3.x\n  - Package has been tested with Vue 3 only, but should work without any issues if using older versions of Vue.\n  - If any issues persist please visit [issues](https://github.com/quelchx/aos-vue/issues) to report an issue -- and I will review it asap.\n\n## Installation\n\n```sh\nnpm install aos-vue\n```\n\n### CDN\n\n```html\n\u003cscript\n  src=\"https://cdn.jsdelivr.net/npm/aos-vue@0.0.2/dist/aos-vue.esm.js\"\n  integrity=\"sha256-yEdgzK8/sKALhYXt7Wx989np5BDj6laj+r4bnEhx6Hw=\"\n  crossorigin=\"anonymous\"\n\u003e\u003c/script\u003e\n```\n\n---\n\n## Usage\n\n### Global\n\nRegistering the component globally, simple usage demonstration.\n\n**main.js**\n\n```js\nimport { createApp } from \"vue\";\nimport App from \"./App.vue\";\nimport AosVue from \"aos-vue\";\ncreateApp(App).use(AosVue).mount(\"#app\");\n```\n\n**App.vue**\n\n```html\n\u003ctemplate\u003e\n  \u003caos-vue animation=\"fade-in\"\u003e\n    \u003ch2\u003e{{message}}\u003c/h2\u003e\n  \u003c/aos-vue\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data() {\n      return { message: \"Animate\" };\n    },\n  };\n\u003c/script\u003e\n```\n\n---\n\n### Local\n\nSimple usage\n\nRegistering the package locally, simple usage demonstration.\n\n**App.vue**\n\n```html\n\u003ctemplate\u003e\n  \u003caos-vue animation=\"slide-up\"\u003e\n    \u003cp\u003eHello World\u003c/p\u003e\n  \u003c/aos-vue\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  import AosVue from \"aos-vue\";\n  export default {\n    components: { AosVue },\n  };\n\u003c/script\u003e\n```\n\n---\n\n## Properties\n\n#### Animation\n\nThe property will determine which animation is to occur depending on what parameter is passed.\n\n- type: String\n- required: true\n- usage:\n\n```html\n\u003caos-vue animation=\"fade-in\"\u003eHello World\u003c/aos-vue\u003e\n```\n\n\u003e Animation Options\n\n##### Fade Animations\n\n- fade\n- fade-up\n- fade-down\n- fade-left\n- fade-right\n- fade-up-right\n- fade-up-left\n- fade-down-right\n- fade-down-left\n\n##### Flip Animations\n\n- flip-up\n- flip-down\n- flip-right\n- flip-left\n\n##### Slide Animations\n\n- slide-down\n- slide-up\n- slide-right\n- slide-left\n\n##### Zoom Animations\n\n- zoom-in\n- zoom-in-up\n- zoom-in-down\n- zoom-in-left\n- zoom-in-right\n- zoom-out\n- zoom-out-up\n- zoom-out-down\n- zoom-out-left\n- zoom-out-right\n\n---\n\n#### Offsets\n\nChange offset to trigger animations sooner or later\n\n- type: Number\n- required: false\n- default: 0\n- usage:\n\n```html\n\u003caos-vue animation=\"fade-in\" :offset=\"200\"\u003eHello World\u003c/aos-vue\u003e\n```\n\n**Note: amounts are pixel (px) amounts**\n\n---\n\n#### Durations\n\nDuration of the animation play time (ms)\n\n- type: Number\n- required: false\n- default: 400\n- usage:\n\n```html\n\u003caos-vue animation=\"fade-in\" :duration=\"600\"\u003eHello World\u003c/aos-vue\u003e\n```\n\n**Note: `duration` accepts values from 50 to 3000, with step 50ms -- this should be good for all use cases. If this is an issue with the set range, you can change the CSS animation to the element you wish to target like the example shown below**\n\n\u003e (Example overriding default animation time)\n\n```CSS\nbody [data-aos-duration='4000'] [data-aos],\n[data-aos][data-aos][data-aos-duration='4000'] {\n  transition-duration: 4000ms;\n}\n```\n\n---\n\n#### Easing\n\nChange and choose timing function to ease elements in different ways\n\n- type: String\n- required: false\n- default: 'ease-in-out'\n- usage:\n\n```html\n\u003caos-vue animation=\"fade-in\" easing=\"ease\"\u003e\u003c/aos-vue\u003e\n```\n\n##### Easing Options\n\n- linear\n- ease\n- ease-in\n- ease-out\n- ease-in-out\n- ease-in-back\n- ease-out-back\n- ease-in-out-back\n- ease-in-sine\n- ease-out-sine\n- ease-in-out-sine\n- ease-in-quad\n- ease-out-quad\n- ease-in-out-quad\n- ease-in-cubic\n- ease-out-cubic\n- ease-in-out-cubic\n- ease-in-quart\n- ease-out-quart\n- ease-in-out-quart\n\n---\n\n#### Delay\n\nDelays the animation by milliseconds (ms).\n\n- type: Number\n- required: false\n- default: 0\n- usage:\n\n```html\n\u003caos-vue animation=\"fade-in\" :delay=\"300\"\u003eHello World\u003c/aos-vue\u003e\n```\n\n---\n\n#### Anchors\n\nAnchor element, whose offset will be counted to trigger animation instead of actual elements offset\n\n- type: String\n- required: false\n- default: null\n- usage\n\n```html\n\u003caos-vue animation=\"fade-in\" anchor=\"#selector\"\u003eHello World\u003c/aos-vue\u003e\n```\n\n---\n\n#### Placement\n\nAnchor placement - which one position of the element on the screen should trigger the animation\n\n- type: String\n- required: false\n- default: 'top-center'\n- usage:\n\n```html\n\u003caos-vue animation=\"fade-in\" placement=\"top-bottom\"\u003eHello World\u003c/aos-vue\u003e\n```\n\n#### Placement Options\n\n- top-bottom\n- top-center\n- top-top\n- center-bottom\n- center-center\n- center-top\n- bottom-bottom\n- bottom-center\n- bottom-top\n\n---\n\n#### Once\n\nChoose whether the animation should fire once, or every time you scroll up/down to the element\n\n- type: Boolean\n- required: false\n- default: false\n- usage:\n\n```html\n\u003caos-vue animation=\"fade-in\" :once=\"true\"\u003eHello World\u003c/aos-vue\u003e\n```\n\n### Issues\n\nIf you encounter any issues or have any concerns please refer to [issues](https://github.com/quelchx/aos-vue/issues) and report a detailed description of what is occurring.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquelchx%2Faos-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquelchx%2Faos-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquelchx%2Faos-vue/lists"}