[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2891":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":19,"rankGlobal":9,"rankLanguage":9,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":23,"topics":24,"createdAt":9,"pushedAt":9,"updatedAt":25,"readmeContent":26,"aiSummary":27,"trendingCount":15,"starSnapshotCount":15,"syncStatus":16,"lastSyncTime":28,"discoverSource":29},2891,"aos","michalsnik\u002Faos","michalsnik","Animate on scroll library",null,"JavaScript",28063,2632,312,344,0,2,6,17,45,"MIT License",false,"next",true,[],"2026-06-12 02:00:44","[![AOS - Animate on scroll library](https:\u002F\u002Fs32.postimg.org\u002Fktvt59hol\u002Faos_header.png)](http:\u002F\u002Fmichalsnik.github.io\u002Faos\u002F)\n\n[![NPM version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Faos\u002Fnext.svg?style=flat)](https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Faos)\n[![NPM downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Faos.svg?style=flat)](https:\u002F\u002Fnpmjs.org\u002Fpackage\u002Faos)\n[![Build Status](https:\u002F\u002Ftravis-ci.org\u002Fmichalsnik\u002Faos.svg?branch=master)](https:\u002F\u002Ftravis-ci.org\u002Fmichalsnik\u002Faos)\n[![Gitter](https:\u002F\u002Fbadges.gitter.im\u002Fmichalsnik\u002Faos.svg)](https:\u002F\u002Fgitter.im\u002Fmichalsnik\u002Faos?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)\n\n[![Twitter Follow](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002Fmichalsnik.svg?style=social)](https:\u002F\u002Ftwitter.com\u002Fmichalsnik) [![Twitter URL](https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Furl\u002Fhttp\u002Fshields.io.svg?style=social)](https:\u002F\u002Ftwitter.com\u002Fhome?status=AOS%20-%20Animate%20on%20Scroll%20library%0Ahttps%3A\u002F\u002Fgithub.com\u002Fmichalsnik\u002Faos)\n\n## :exclamation::exclamation::exclamation: This is README for aos@next :exclamation::exclamation::exclamation:\n\nFor last stable release (v2) go [here](https:\u002F\u002Fgithub.com\u002Fmichalsnik\u002Faos\u002Ftree\u002Fv2)\n\n---\n### 🚀 [Demo](http:\u002F\u002Fmichalsnik.github.io\u002Faos\u002F)\n\n### 🌟 Codepen Examples\n- [Different built-in animations](http:\u002F\u002Fcodepen.io\u002Fmichalsnik\u002Fpen\u002FWxNdvq)\n- [With anchor setting in use](http:\u002F\u002Fcodepen.io\u002Fmichalsnik\u002Fpen\u002FjrOYVO)\n- [With anchor-placement and different easings](http:\u002F\u002Fcodepen.io\u002Fmichalsnik\u002Fpen\u002FEyxoNm)\n- [With simple custom animations](http:\u002F\u002Fcodepen.io\u002Fmichalsnik\u002Fpen\u002FWxvNvE)\n\n👉 To get a better understanding how this actually works, I encourage you to check [my post on CSS-tricks](https:\u002F\u002Fcss-tricks.com\u002Faos-css-driven-scroll-animation-library\u002F).\n\n---\n\n## ⚙ Installation\n\n### Basic\n\nAdd styles in `\u003Chead>`:\n\n```html\n  \u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Faos@next\u002Fdist\u002Faos.css\" \u002F>\n```\n\nAdd script right before closing `\u003C\u002Fbody>` tag, and initialize AOS:\n```html\n  \u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Faos@next\u002Fdist\u002Faos.js\">\u003C\u002Fscript>\n  \u003Cscript>\n    AOS.init();\n  \u003C\u002Fscript>\n```\n\n### Using package managers\n\nInstall `aos` package:\n* `yarn add aos@next`\n* or `npm install --save aos@next`\n\nImport script, styles and initialize AOS:\n```js\nimport AOS from 'aos';\nimport 'aos\u002Fdist\u002Faos.css'; \u002F\u002F You can also use \u003Clink> for styles\n\u002F\u002F ..\nAOS.init();\n```\n\nIn order to make it work you'll have to make sure your build process has configured styles loader, and bundles it all correctly.\nIf you're using [Parcel](https:\u002F\u002Fparceljs.org\u002F) however, it will work out of the box as provided.\n\n---\n\n\n## 🤔 How to use it?\n\n### 1. Initialize AOS:\n\n```js\nAOS.init();\n\n\u002F\u002F You can also pass an optional settings object\n\u002F\u002F below listed default settings\nAOS.init({\n  \u002F\u002F Global settings:\n  disable: false, \u002F\u002F accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function\n  startEvent: 'DOMContentLoaded', \u002F\u002F name of the event dispatched on the document, that AOS should initialize on\n  initClassName: 'aos-init', \u002F\u002F class applied after initialization\n  animatedClassName: 'aos-animate', \u002F\u002F class applied on animation\n  useClassNames: false, \u002F\u002F if true, will add content of `data-aos` as classes on scroll\n  disableMutationObserver: false, \u002F\u002F disables automatic mutations' detections (advanced)\n  debounceDelay: 50, \u002F\u002F the delay on debounce used while resizing window (advanced)\n  throttleDelay: 99, \u002F\u002F the delay on throttle used while scrolling the page (advanced)\n  \n\n  \u002F\u002F Settings that can be overridden on per-element basis, by `data-aos-*` attributes:\n  offset: 120, \u002F\u002F offset (in px) from the original trigger point\n  delay: 0, \u002F\u002F values from 0 to 3000, with step 50ms\n  duration: 400, \u002F\u002F values from 0 to 3000, with step 50ms\n  easing: 'ease', \u002F\u002F default easing for AOS animations\n  once: false, \u002F\u002F whether animation should happen only once - while scrolling down\n  mirror: false, \u002F\u002F whether elements should animate out while scrolling past them\n  anchorPlacement: 'top-bottom', \u002F\u002F defines which position of the element regarding to window should trigger the animation\n\n});\n```\n\n### 2. Set animation using `data-aos` attribute:\n\n```html\n  \u003Cdiv data-aos=\"fade-in\">\u003C\u002Fdiv>\n```\n\nAnd adjust behaviour by using `data-aos-*` attributes:\n```html\n  \u003Cdiv\n    data-aos=\"fade-up\"\n    data-aos-offset=\"200\"\n    data-aos-delay=\"50\"\n    data-aos-duration=\"1000\"\n    data-aos-easing=\"ease-in-out\"\n    data-aos-mirror=\"true\"\n    data-aos-once=\"false\"\n    data-aos-anchor-placement=\"top-center\"\n  >\n  \u003C\u002Fdiv>\n```\n\n[See full list of all animations, easings and anchor placements](https:\u002F\u002Fgithub.com\u002Fmichalsnik\u002Faos#animations)\n\n#### Anchor\n\nThere is also a setting that can be used only on per-element basis:\n* `data-aos-anchor` - element whose offset will be used to trigger animation instead of an actual one.\n\nExamples:\n```html\n\u003Cdiv data-aos=\"fade-up\" data-aos-anchor=\".other-element\">\u003C\u002Fdiv>\n```\n\nThis way you can trigger animation on one element, while you scroll to another - useful in animating fixed elements.\n\n---\n\n## API\n\nAOS object is exposed as a global variable, for now there are three methods available:\n\n  * `init` - initialize AOS\n  * `refresh` - recalculate all offsets and positions of elements (called on window resize)\n  * `refreshHard` - reinit array with AOS elements and trigger `refresh` (called on DOM changes that are related to `aos` elements)\n\nExample execution:\n```javascript\n  AOS.refresh();\n```\n\nBy default AOS is watching for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM it calls `refreshHard` automatically. In browsers that don't support `MutationObserver` like IE you might need to call `AOS.refreshHard()` by yourself.\n\n`refresh` method is called on window resize and so on, as it doesn't require to build new store with AOS elements and should be as light as possible.\n\n---\n\n## JS Events\n\nAOS dispatches two events on document: `aos:in` and `aos:out` whenever any element animates in or out, so that you can do extra stuff in JS:\n```js\ndocument.addEventListener('aos:in', ({ detail }) => {\n  console.log('animated in', detail);\n});\n\ndocument.addEventListener('aos:out', ({ detail }) => {\n  console.log('animated out', detail);\n});\n```\n\nYou can also tell AOS to trigger custom event on specific element, by setting `data-aos-id` attribute:\n```html\n\u003Cdiv data-aos=\"fade-in\" data-aos-id=\"super-duper\">\u003C\u002Fdiv>\n```\n\nThen you'll be able to listen for two custom events then:\n- `aos:in:super-duper`\n- `aos:out:super-duper`\n\n---\n\n## Recipes:\n\n#### Adding custom animations:\nSometimes built-in animations are just not enough. Let's say you need one box to have different animation depending on resolution.\nHere's how you could do it:\n\n```css\n[data-aos=\"new-animation\"] {\n  opacity: 0;\n  transition-property: transform, opacity;\n\n  &.aos-animate {\n    opacity: 1;\n  }\n\n  @media screen and (min-width: 768px) {\n    transform: translateX(100px);\n\n    &.aos-animate {\n      transform: translateX(0);\n    }\n  }\n}\n```\nThen use it in HTML:\n```html\n\u003Cdiv data-aos=\"new-animation\">\u003C\u002Fdiv>\n```\nThe element will only animate opacity on mobile devices, but from 768px width it'll also slide from right to left.\n\n#### Adding custom easing:\nSimilar to animations you can add custom easings:\n```css\n[data-aos] {\n  body[data-aos-easing=\"new-easing\"] &,\n  &[data-aos][data-aos-easing=\"new-easing\"] {\n    transition-timing-function: cubic-bezier(.250, .250, .750, .750);\n  }\n}\n```\n\n#### Customizing default animations distance\nDefault distance for built-in animations is 100px. As long as you're using SCSS though, you can override it:\n```css\n$aos-distance: 200px; \u002F\u002F It has to be above import\n@import 'node_modules\u002Faos\u002Fsrc\u002Fsass\u002Faos.scss';\n```\nYou have to however configure your build process to allow it to import styles from `node_modules` beforehand.\n\n#### Integrating external CSS animation library (e.g. Animate.css):\nUse `animatedClassName` to change default behaviour of AOS, to apply class names placed inside `data-aos` on scroll.\n\n```html\n\u003Cdiv data-aos=\"fadeInUp\">\u003C\u002Fdiv>\n```\n\n```js\nAOS.init({\n  useClassNames: true,\n  initClassName: false,\n  animatedClassName: 'animated',\n});\n```\n\nThe above element will get two classes: `animated` and `fadeInUp`. Using different combinations of the three above settings, you should be able to integrate any external CSS animation library.\n\nExternal libraries however don't care too much about animation state before the actual animation. So if you want those elements to be not visible before scrolling, you might need to add similar styles:\n```css\n[data-aos] {\n  visibility: hidden;\n}\n[data-aos].animated {\n  visibility: visible;\n}\n```\n\n---\n\n## Caveats:\n\n#### setting: `duration`, `delay`\n\nDuration and delay accept values from 50 to 3000, with step 50ms, it's because those are handled by css, and to not make css longer than it is already I implemented only a subset. I believe those should cover most cases.\n\nIf not, you can write simple CSS that will add another duration, for example:\n\n```css\n  body[data-aos-duration='4000'] [data-aos],\n  [data-aos][data-aos][data-aos-duration='4000'] {\n    transition-duration: 4000ms;\n  }\n```\nThis code will add 4000ms duration available for you to set on AOS elements, or to set as global duration while initializing AOS script.\nNotice that double `[data-aos][data-aos]` - it's not a mistake, it is a trick, to make individual settings more important than global, without need to write ugly \"!important\" there :)\n\nExample usage:\n```html\n  \u003Cdiv data-aos=\"fade-in\" data-aos-duration=\"4000\">\u003C\u002Fdiv>\n```\n\n---\n\n## Predefined options\n\n### Animations\n\n  * Fade animations:\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    * flip-up\n    * flip-down\n    * flip-left\n    * flip-right\n\n  * Slide animations:\n    * slide-up\n    * slide-down\n    * slide-left\n    * slide-right\n\n  * Zoom animations:\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### Anchor placements:\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### Easing functions:\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## ❔Questions\n\nIf you found a bug, have a question or an idea, please check [AOS contribution guide](CONTRIBUTING.md) and don't hesitate to create new issues.\n","AOS 是一个用于实现滚动动画效果的JavaScript库。它允许开发者轻松地为网页元素添加基于滚动触发的动画，支持多种内置动画效果，并且可以通过设置自定义参数来调整动画行为，如延迟时间、动画持续时间和偏移量等。AOS还提供了灵活的配置选项，包括对不同设备类型的响应式控制，确保了在移动设备上的良好表现。此库非常适合需要增强用户体验和视觉吸引力的网站或单页应用中使用，尤其是在内容丰富、布局复杂的页面设计场景下。","2026-06-11 02:51:32","top_language"]