aos-modern 3.0.0 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## [3.0.1]
+
+### Changed
+- **Docs**: Removed obsolete Codepen example links that pointed to legacy repository demos.
+- **Docs**: Added CDN (unpkg) setup instructions alongside local `node_modules` options in both `README.md` and `README.zh-CN.md`.
+
 ## [3.0.0]
 
 ### Added

package/README.md

@@ -1,11 +1,13 @@
-[![AOS - Animate on scroll library](https://s32.postimg.org/ktvt59hol/aos_header.png)](https://gabulaideu.github.io/aos/)
+# AOS Modern
 
-[![NPM version](https://img.shields.io/npm/v/aos-modern.svg?style=flat)](https://npmjs.org/package/aos-modern)
-[![NPM downloads](https://img.shields.io/npm/dm/aos-modern.svg?style=flat)](https://npmjs.org/package/aos-modern)
-[![Build Status](https://travis-ci.org/michalsnik/aos.svg?branch=master)](https://travis-ci.org/michalsnik/aos)
-[![Gitter](https://badges.gitter.im/michalsnik/aos.svg)](https://gitter.im/michalsnik/aos?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[English](./README.md) | [简体中文](./README.zh-CN.md)
 
-[![Twitter Follow](https://img.shields.io/twitter/follow/michalsnik.svg?style=social)](https://twitter.com/michalsnik) [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/home?status=AOS%20-%20Animate%20on%20Scroll%20library%0Ahttps%3A//github.com/michalsnik/aos)
+---
+
+[![AOS - Animate on scroll library](https://gabulaideu.github.io/aos/logo.svg)](https://gabulaideu.github.io/aos/)
+
+[![NPM version](https://img.shields.io/npm/v/aos-modern.svg?style=flat)](https://www.npmjs.com/package/aos-modern)
+[![NPM downloads](https://img.shields.io/npm/dm/aos-modern.svg?style=flat)](https://www.npmjs.com/package/aos-modern)
 
 Small library to animate elements on your page as you scroll.
 
@@ -20,15 +22,10 @@ If you scroll back to top, elements will animate to it's previous state and are
 
 ### 🚀 [Demo](https://gabulaideu.github.io/aos/)
 
-### 🌟 Codepen Examples
-- [Different build in animations](http://codepen.io/michalsnik/pen/WxNdvq)
-- [With anchor setting in use](http://codepen.io/michalsnik/pen/jrOYVO)
-- [With anchor-placement and different easing](http://codepen.io/michalsnik/pen/EyxoNm)
-- [With simple custom animations](http://codepen.io/michalsnik/pen/WxvNvE)
-
 ---
 
 ## ❗ Attention
+
 From version `2.0.0` attributes `aos` are no longer supported, always use `data-aos`.
 
 ## ⚙ Setup
@@ -37,73 +34,81 @@ From version `2.0.0` attributes `aos` are no longer supported, always use `data-
 
 - Using `npm` or `yarn`
 
-    ```bash
-      npm install aos-modern --save
-      # or
-      yarn add aos-modern
-    ```
+  ```bash
+    npm install aos-modern --save
+    # or
+    yarn add aos-modern
+  ```
 
 - Direct download -> [click here](https://github.com/gabulaideu/aos/archive/master.zip)
 
-
 ### Link styles
 
-```html
+- **CDN**:
+  ```html
+  <link rel="stylesheet" href="https://unpkg.com/aos-modern@latest/dist/aos.css" />
+  ```
+- **Local**:
+  ```html
   <link rel="stylesheet" href="node_modules/aos-modern/dist/aos.css" />
-```
+  ```
 
 ### Add scripts
 
-```html
+- **CDN**:
+  ```html
+  <script src="https://unpkg.com/aos-modern@latest/dist/aos.js"></script>
+  ```
+- **Local**:
+  ```html
   <script src="node_modules/aos-modern/dist/aos.js"></script>
-```
+  ```
 
 AOS from version `1.2.0` is available as UMD module, so you can use it as AMD, Global, Node or ES6 module.
 
 ### Init AOS
 
 ```javascript
-  <script>
-    AOS.init();
-  </script>
+<script>AOS.init();</script>
 ```
 
 ## 🤔 How to use it?
 
 ### Basic usage
 
-  All you have to do is to add `data-aos` attribute to html element, like so:
+All you have to do is to add `data-aos` attribute to html element, like so:
 
 ```html
-  <div data-aos="animation_name">
+<div data-aos="animation_name"></div>
 ```
 
-  Script will trigger "animation_name" animation on this element, if you scroll to it.
+Script will trigger "animation_name" animation on this element, if you scroll to it.
 
-  [Down below](https://github.com/gabulaideu/aos#-animations) is a list of all available animations for now :)
+[Down below](https://github.com/gabulaideu/aos#-animations) is a list of all available animations for now :)
 
 ### 🔥 Advanced settings
 
 These settings can be set both on certain elements, or as default while initializing script (in options object without `data-` part).
 
-| Attribute | Description | Example value | Default value |
-|---------------------------|-------------|---------------|---------|
-| *`data-aos-offset`* | Change offset to trigger animations sooner or later (px) | 200 | 120 |
-| *`data-aos-duration`* | *Duration of animation (ms) | 600 | 400 |
-| *`data-aos-easing`* | Choose timing function to ease elements in different ways | ease-in-sine | ease |
-| *`data-aos-delay`* | Delay animation (ms) | 300 | 0 |
-| *`data-aos-anchor`* | Anchor element, whose offset will be counted to trigger animation instead of actual elements offset | #selector | null |
-| *`data-aos-anchor-placement`* | Anchor placement - which one position of element on the screen should trigger animation | top-center | top-bottom |
-| *`data-aos-once`* | Choose wheter animation should fire once, or every time you scroll up/down to element | true | false |
+| Attribute                     | Description                                                                                         | Example value | Default value |
+| ----------------------------- | --------------------------------------------------------------------------------------------------- | ------------- | ------------- |
+| _`data-aos-offset`_           | Change offset to trigger animations sooner or later (px)                                            | 200           | 120           |
+| _`data-aos-duration`_         | \*Duration of animation (ms)                                                                        | 600           | 400           |
+| _`data-aos-easing`_           | Choose timing function to ease elements in different ways                                           | ease-in-sine  | ease          |
+| _`data-aos-delay`_            | Delay animation (ms)                                                                                | 300           | 0             |
+| _`data-aos-anchor`_           | Anchor element, whose offset will be counted to trigger animation instead of actual elements offset | #selector     | null          |
+| _`data-aos-anchor-placement`_ | Anchor placement - which one position of element on the screen should trigger animation             | top-center    | top-bottom    |
+| _`data-aos-once`_             | Choose wheter animation should fire once, or every time you scroll up/down to element               | true          | false         |
 
-*Duration accept values from 50 to 3000, with step 50ms, it's because duration of animation is handled by css, and to not make css longer than it is already I created implementations only in this range. I think this should be good for almost all cases.
+\*Duration accept values from 50 to 3000, with step 50ms, it's because duration of animation is handled by css, and to not make css longer than it is already I created implementations only in this range. I think this should be good for almost all cases.
 
 If not, you may write simple CSS on your page that will add another duration option value available, for example:
 
 ```css
-  body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
-    transition-duration: 4000ms;
-  }
+body[data-aos-duration="4000"] [data-aos],
+[data-aos][data-aos][data-aos-duration="4000"] {
+  transition-duration: 4000ms;
+}
 ```
 
 This code will add 4000ms duration available for you to set on AOS elements, or to set as global duration while initializing AOS script.
@@ -117,28 +122,39 @@ Down below you can find list of all anchor-placement options.
 #### Examples:
 
 ```html
-  <div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">
+<div
+  data-aos="fade-zoom-in"
+  data-aos-offset="200"
+  data-aos-easing="ease-in-sine"
+  data-aos-duration="600"
+></div>
 ```
+
 ```html
-  <div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector">
+<div
+  data-aos="flip-left"
+  data-aos-delay="100"
+  data-aos-anchor=".example-selector"
+></div>
 ```
+
 ```html
-  <div data-aos="fade-up" data-aos-anchor-placement="top-center">
+<div data-aos="fade-up" data-aos-anchor-placement="top-center"></div>
 ```
 
-
 #### API
 
 AOS object is exposed as a global variable, for now there are four methods available:
 
-  * `init` - initialize AOS
-  * `refresh` - recalculate all offsets and positions of elements (called on window resize)
-  * `refreshHard` - reinit array with AOS elements and trigger `refresh` (called on DOM changes that are related to `aos` elements)
-  * `destroy` - cleanup all scroll observers, mutation observers, and event listeners (ideal for SPA router/lifecycle cleanups)
+- `init` - initialize AOS
+- `refresh` - recalculate all offsets and positions of elements (called on window resize)
+- `refreshHard` - reinit array with AOS elements and trigger `refresh` (called on DOM changes that are related to `aos` elements)
+- `destroy` - cleanup all scroll observers, mutation observers, and event listeners (ideal for SPA router/lifecycle cleanups)
 
 Example execution:
+
 ```javascript
-  AOS.refresh();
+AOS.refresh();
 ```
 
 By 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.
@@ -166,10 +182,10 @@ To do this, pass options object to `init()` function, like so:
 
 These settings can be set only in options object while initializing AOS.
 
-| Setting | Description | Example value | Default value |
-|---------------------------|-------------|---------------|---------|
-| *`disable`* | Condition when AOS should be disabled | mobile | false |
-| *`startEvent`* | Name of event, on which AOS should be initialized | exampleEvent | DOMContentLoaded |
+| Setting        | Description                                       | Example value | Default value    |
+| -------------- | ------------------------------------------------- | ------------- | ---------------- |
+| _`disable`_    | Condition when AOS should be disabled             | mobile        | false            |
+| _`startEvent`_ | Name of event, on which AOS should be initialized | exampleEvent  | DOMContentLoaded |
 
 ##### Disabling AOS
 
@@ -187,7 +203,7 @@ There are several options that you can use to fit AOS perfectly into your projec
 `mobile` (phones and tablets), `phone` or `tablet`. This will disable AOS on those certains devices. But if you want make your own condition, simple type your statement instead of device type name:
 
 ```javascript
-  disable: window.innerWidth < 1024
+disable: window.innerWidth < 1024;
 ```
 
 There is also posibility to pass a `function`, which should at the end return `true` or `false`:
@@ -212,11 +228,13 @@ If you don't want to initialize AOS on `DOMContentLoaded` event, you can pass yo
 ```
 
 **Important note:** If you set `startEvent: 'load'` it will add event listener on `window` instead of `document`.
+
 ### 🖥 Local Demos
 
 AOS Modern comes with ready-to-run HTML demo pages for both the core library and the framework integrations, demonstrating advanced animations and component lifecycles.
 
 To run the demos locally:
+
 1. Clone this repository
 2. Install dependencies and start the development server:
    ```bash
@@ -224,11 +242,11 @@ To run the demos locally:
    yarn dev
    ```
 3. Open the following pages in your browser:
-    - **Official Interactive Demo Portal**: [http://localhost:8080/](http://localhost:8080/)
-    - **Core Library (Static)**: [http://localhost:8080/simple.html](http://localhost:8080/simple.html)
-    - **Core Library (Async DOM Mutation)**: [http://localhost:8080/async.html](http://localhost:8080/async.html)
-    - **React (useAOS Hook & Lifecycle)**: [http://localhost:8080/react.html](http://localhost:8080/react.html)
-    - **Vue (v-aos Custom Directive)**: [http://localhost:8080/vue.html](http://localhost:8080/vue.html)
+   - **Official Interactive Demo Portal**: [http://localhost:8080/](http://localhost:8080/)
+   - **Core Library (Static)**: [http://localhost:8080/simple.html](http://localhost:8080/simple.html)
+   - **Core Library (Async DOM Mutation)**: [http://localhost:8080/async.html](http://localhost:8080/async.html)
+   - **React (useAOS Hook & Lifecycle)**: [http://localhost:8080/react.html](http://localhost:8080/react.html)
+   - **Vue (v-aos Custom Directive)**: [http://localhost:8080/vue.html](http://localhost:8080/vue.html)
 
 ### 📦 Framework Integrations
 
@@ -239,20 +257,16 @@ AOS provides native integrations for modern frontend frameworks (React, Vue) out
 AOS exposes a custom hook `useAOS` to handle initialization and component cleanup.
 
 ```javascript
-import React from 'react';
-import { useAOS } from 'aos/react';
+import React from "react";
+import { useAOS } from "aos/react";
 
 function MyComponent() {
   useAOS({
     duration: 1000,
-    once: true
+    once: true,
   });
 
-  return (
-    <div data-aos="fade-up">
-      Animate me!
-    </div>
-  );
+  return <div data-aos="fade-up">Animate me!</div>;
 }
 ```
 
@@ -261,19 +275,19 @@ function MyComponent() {
 We support both Vue 2 and Vue 3 using a unified Vue Plugin and a custom directive `v-aos`.
 
 ```javascript
-import { createApp } from 'vue';
-import { AOSPlugin } from 'aos/vue';
-import App from './App.vue';
+import { createApp } from "vue";
+import { AOSPlugin } from "aos/vue";
+import App from "./App.vue";
 
 const app = createApp(App);
 
 // Register AOS Plugin
 app.use(AOSPlugin, {
   duration: 800,
-  once: false
+  once: false,
 });
 
-app.mount('#app');
+app.mount("#app");
 ```
 
 Then use the `v-aos` directive in your components:
@@ -289,112 +303,110 @@ Then use the `v-aos` directive in your components:
 <div v-aos="{ animation: 'zoom-in', delay: 200, duration: 600 }"></div>
 ```
 
-
 ### 👻 Animations
 
 There are serveral predefined animations you can use already:
 
-  * Fade animations:
-    * fade
-    * fade-up
-    * fade-down
-    * fade-left
-    * fade-right
-    * fade-up-right
-    * fade-up-left
-    * fade-down-right
-    * fade-down-left
-
-  * Flip animations:
-    * flip-up
-    * flip-down
-    * flip-left
-    * flip-right
-
-  * Slide animations:
-    * slide-up
-    * slide-down
-    * slide-left
-    * slide-right
-
-  * Zoom animations:
-    * zoom-in
-    * zoom-in-up
-    * zoom-in-down
-    * zoom-in-left
-    * zoom-in-right
-    * zoom-out
-    * zoom-out-up
-    * zoom-out-down
-    * zoom-out-left
-    * zoom-out-right
-
-  * Blur animations:
-    * blur-in
-    * blur-in-up
-    * blur-in-down
-    * blur-in-left
-    * blur-in-right
-
-  * Skew animations:
-    * skew-up
-    * skew-down
-
-  * Rotate animations:
-    * rotate-in
-    * rotate-in-up-left
-    * rotate-in-up-right
-    * rotate-in-down-left
-    * rotate-in-down-right
-
-  * Back animations:
-    * back-in
-    * back-in-up
-    * back-in-down
-    * back-in-left
-    * back-in-right
-
-  * Specials:
-    * roll-in
-    * jack-in-the-box
+- Fade animations:
+  - fade
+  - fade-up
+  - fade-down
+  - fade-left
+  - fade-right
+  - fade-up-right
+  - fade-up-left
+  - fade-down-right
+  - fade-down-left
+
+- Flip animations:
+  - flip-up
+  - flip-down
+  - flip-left
+  - flip-right
+
+- Slide animations:
+  - slide-up
+  - slide-down
+  - slide-left
+  - slide-right
+
+- Zoom animations:
+  - zoom-in
+  - zoom-in-up
+  - zoom-in-down
+  - zoom-in-left
+  - zoom-in-right
+  - zoom-out
+  - zoom-out-up
+  - zoom-out-down
+  - zoom-out-left
+  - zoom-out-right
+
+- Blur animations:
+  - blur-in
+  - blur-in-up
+  - blur-in-down
+  - blur-in-left
+  - blur-in-right
+
+- Skew animations:
+  - skew-up
+  - skew-down
+
+- Rotate animations:
+  - rotate-in
+  - rotate-in-up-left
+  - rotate-in-up-right
+  - rotate-in-down-left
+  - rotate-in-down-right
+
+- Back animations:
+  - back-in
+  - back-in-up
+  - back-in-down
+  - back-in-left
+  - back-in-right
+
+- Specials:
+  - roll-in
+  - jack-in-the-box
 
 ### Anchor placement:
 
-  * top-bottom
-  * top-center
-  * top-top
-  * center-bottom
-  * center-center
-  * center-top
-  * bottom-bottom
-  * bottom-center
-  * bottom-top
-
+- top-bottom
+- top-center
+- top-top
+- center-bottom
+- center-center
+- center-top
+- bottom-bottom
+- bottom-center
+- bottom-top
 
 ### Easing functions:
 
 You can choose one of these timing function to animate elements nicely:
 
-  * linear
-  * ease
-  * ease-in
-  * ease-out
-  * ease-in-out
-  * ease-in-back
-  * ease-out-back
-  * ease-in-out-back
-  * ease-in-sine
-  * ease-out-sine
-  * ease-in-out-sine
-  * ease-in-quad
-  * ease-out-quad
-  * ease-in-out-quad
-  * ease-in-cubic
-  * ease-out-cubic
-  * ease-in-out-cubic
-  * ease-in-quart
-  * ease-out-quart
-  * ease-in-out-quart
+- linear
+- ease
+- ease-in
+- ease-out
+- ease-in-out
+- ease-in-back
+- ease-out-back
+- ease-in-out-back
+- ease-in-sine
+- ease-out-sine
+- ease-in-out-sine
+- ease-in-quad
+- ease-out-quad
+- ease-in-out-quad
+- ease-in-cubic
+- ease-out-cubic
+- ease-in-out-cubic
+- ease-in-quart
+- ease-out-quart
+- ease-in-out-quart
 
 ## ✌️ [Contributing](CONTRIBUTING.md)
 

package/README.zh-CN.md

@@ -1,9 +1,15 @@
+# AOS Modern
+
+[English](./README.md) | [简体中文](./README.zh-CN.md)
+
+---
+
 # AOS - 页面滚动动画库 (Animate on Scroll)
 
-[![AOS - Animate on scroll library](https://s32.postimg.org/ktvt59hol/aos_header.png)](https://gabulaideu.github.io/aos/)
+[![AOS - Animate on scroll library](https://gabulaideu.github.io/aos/logo.svg)](https://gabulaideu.github.io/aos/)
 
-[![NPM version](https://img.shields.io/npm/v/aos-modern.svg?style=flat)](https://npmjs.org/package/aos-modern)
-[![NPM downloads](https://img.shields.io/npm/dm/aos-modern.svg?style=flat)](https://npmjs.org/package/aos-modern)
+[![NPM version](https://img.shields.io/npm/v/aos-modern.svg?style=flat)](https://www.npmjs.com/package/aos-modern)
+[![NPM downloads](https://img.shields.io/npm/dm/aos-modern.svg?style=flat)](https://www.npmjs.com/package/aos-modern)
 
 一个用于在页面滚动时为元素添加动画的超轻量库。
 
@@ -18,15 +24,10 @@ AOS 支持在向下和向上滚动时，为元素应用动画。
 
 ### 🚀 [在线 Demo](https://gabulaideu.github.io/aos/)
 
-### 🌟 Codepen 在线示例
-- [不同内置动画演示](http://codepen.io/michalsnik/pen/WxNdvq)
-- [使用自定义锚点设置 (data-aos-anchor)](http://codepen.io/michalsnik/pen/jrOYVO)
-- [使用不同的触发位置和缓动效果](http://codepen.io/michalsnik/pen/EyxoNm)
-- [简单的自定义动画](http://codepen.io/michalsnik/pen/WxvNvE)
-
 ---
 
 ## ❗ 注意事项
+
 从 `2.0.0` 版本开始，原先的 `aos` 属性已被废弃，请务必使用标准 HTML5 的 `data-aos`。
 
 ## ⚙ 安装与设置
@@ -35,35 +36,44 @@ AOS 支持在向下和向上滚动时，为元素应用动画。
 
 - 使用 `npm` 或 `yarn`
 
-    ```bash
-      npm install aos-modern --save
-      # 或者
-      yarn add aos-modern
-    ```
+  ```bash
+    npm install aos-modern --save
+    # 或者
+    yarn add aos-modern
+  ```
 
 - 直接下载压缩包 -> [点击下载](https://github.com/gabulaideu/aos/archive/master.zip)
 
-
 ### 引入样式表
 
-```html
+- **CDN**:
+  ```html
+  <link rel="stylesheet" href="https://unpkg.com/aos-modern@latest/dist/aos.css" />
+  ```
+- **本地引入 (node_modules)**:
+  ```html
   <link rel="stylesheet" href="node_modules/aos-modern/dist/aos.css" />
-```
+  ```
 
 ### 引入脚本
 
-```html
+- **CDN**:
+  ```html
+  <script src="https://unpkg.com/aos-modern@latest/dist/aos.js"></script>
+  ```
+- **本地引入 (node_modules)**:
+  ```html
   <script src="node_modules/aos-modern/dist/aos.js"></script>
-```
+  ```
 
 AOS 兼容 UMD 模块规范，因此您可以通过 AMD、CommonJS 模块导入，或以全局变量、Node 模块以及 ES6 模块的形式进行使用。
 
 ### 初始化 AOS
 
 ```html
-  <script>
-    AOS.init();
-  </script>
+<script>
+  AOS.init();
+</script>
 ```
 
 ## 🤔 如何使用？
@@ -73,7 +83,7 @@ AOS 兼容 UMD 模块规范，因此您可以通过 AMD、CommonJS 模块导入
 只需在 HTML 元素上添加 `data-aos` 属性即可：
 
 ```html
-  <div data-aos="动画名称">
+<div data-aos="动画名称"></div>
 ```
 
 当您滚动到该元素时，脚本就会自动触发该元素的“动画名称”动画。
@@ -84,24 +94,25 @@ AOS 兼容 UMD 模块规范，因此您可以通过 AMD、CommonJS 模块导入
 
 这些属性可以单独配置在特定元素上，也可以在初始化脚本时配置在全局默认对象中（在配置项对象中不需要加上 `data-` 前缀）。
 
-| 属性 | 说明 | 示例值 | 默认值 |
-|---------------------------|-------------|---------------|---------|
-| *`data-aos-offset`* | 更改动画触发的偏移量，单位像素 (px) | 200 | 120 |
-| *`data-aos-duration`* | 动画的持续时间，单位毫秒 (ms) | 600 | 400 |
-| *`data-aos-easing`* | 选择不同的 CSS3 缓动函数 | ease-in-sine | ease |
-| *`data-aos-delay`* | 延迟触发动画的时间，单位毫秒 (ms) | 300 | 0 |
-| *`data-aos-anchor`* | 锚点元素。指定另一个元素的偏移来触发当前元素的动画，而不是使用自身偏移 | #selector | null |
-| *`data-aos-anchor-placement`* | 锚点位置。指定当元素在屏幕什么位置时触发动画 | top-center | top-bottom |
-| *`data-aos-once`* | 动画是否仅触发一次，还是在每次滚动页面时重复触发 | true | false |
+| 属性                          | 说明                                                                   | 示例值       | 默认值     |
+| ----------------------------- | ---------------------------------------------------------------------- | ------------ | ---------- |
+| _`data-aos-offset`_           | 更改动画触发的偏移量，单位像素 (px)                                    | 200          | 120        |
+| _`data-aos-duration`_         | 动画的持续时间，单位毫秒 (ms)                                          | 600          | 400        |
+| _`data-aos-easing`_           | 选择不同的 CSS3 缓动函数                                               | ease-in-sine | ease       |
+| _`data-aos-delay`_            | 延迟触发动画的时间，单位毫秒 (ms)                                      | 300          | 0          |
+| _`data-aos-anchor`_           | 锚点元素。指定另一个元素的偏移来触发当前元素的动画，而不是使用自身偏移 | #selector    | null       |
+| _`data-aos-anchor-placement`_ | 锚点位置。指定当元素在屏幕什么位置时触发动画                           | top-center   | top-bottom |
+| _`data-aos-once`_             | 动画是否仅触发一次，还是在每次滚动页面时重复触发                       | true         | false      |
 
-*`duration` 仅支持从 50 到 3000 的值，步长为 50ms。因为动画是由 CSS 控制的，为限制生成的 CSS 体积才做此范围约束。
+\*`duration` 仅支持从 50 到 3000 的值，步长为 50ms。因为动画是由 CSS 控制的，为限制生成的 CSS 体积才做此范围约束。
 
 如果您需要更多时间档位，可以在页面中自定义 CSS，例如：
 
 ```css
-  body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
-    transition-duration: 4000ms;
-  }
+body[data-aos-duration="4000"] [data-aos],
+[data-aos][data-aos][data-aos-duration="4000"] {
+  transition-duration: 4000ms;
+}
 ```
 
 这会在全局以及单体配置上增加 4000ms 的动画时间档位。
@@ -113,28 +124,39 @@ AOS 兼容 UMD 模块规范，因此您可以通过 AMD、CommonJS 模块导入
 #### 示例代码：
 
 ```html
-  <div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">
+<div
+  data-aos="fade-zoom-in"
+  data-aos-offset="200"
+  data-aos-easing="ease-in-sine"
+  data-aos-duration="600"
+></div>
 ```
+
 ```html
-  <div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector">
+<div
+  data-aos="flip-left"
+  data-aos-delay="100"
+  data-aos-anchor=".example-selector"
+></div>
 ```
+
 ```html
-  <div data-aos="fade-up" data-aos-anchor-placement="top-center">
+<div data-aos="fade-up" data-aos-anchor-placement="top-center"></div>
 ```
 
-
 #### API 接口
 
 AOS 作为一个全局变量暴露在 window 下，当前提供四个方法：
 
-  * `init` - 初始化 AOS
-  * `refresh` - 重新计算所有元素的偏移和位置（例如在窗口大小改变时）
-  * `refreshHard` - 重新装载符合条件的 `data-aos` 元素并触发 `refresh`（在异步添加/移出 DOM 时调用）
-  * `destroy` - 清理并解绑所有的滚动观察器、DOM 监听器以及事件监听（特别适用于 SPA 应用路由/生命周期销毁）
+- `init` - 初始化 AOS
+- `refresh` - 重新计算所有元素的偏移和位置（例如在窗口大小改变时）
+- `refreshHard` - 重新装载符合条件的 `data-aos` 元素并触发 `refresh`（在异步添加/移出 DOM 时调用）
+- `destroy` - 清理并解绑所有的滚动观察器、DOM 监听器以及事件监听（特别适用于 SPA 应用路由/生命周期销毁）
 
 使用方法示例：
+
 ```javascript
-  AOS.refresh();
+AOS.refresh();
 ```
 
 默认情况下，AOS 会使用 `MutationObserver` 自动侦测 DOM 的变动。如果有新元素异步加载或被移除，它会自动触发 `refreshHard()`。在不支持 `MutationObserver` 的旧浏览器中，您可能需要手动调用该方法。
@@ -160,19 +182,19 @@ AOS 作为一个全局变量暴露在 window 下，当前提供四个方法：
 
 以下选项只能在调用 `AOS.init({...})` 时传入配置对象中：
 
-| 选项名称 | 说明 | 示例值 | 默认值 |
-|---------------------------|-------------|---------------|---------|
-| *`disable`* | 禁用 AOS 的判定条件 | 'mobile' | false |
-| *`startEvent`* | 初始化 AOS 的文档事件名 | 'someEvent' | 'DOMContentLoaded' |
+| 选项名称       | 说明                    | 示例值      | 默认值             |
+| -------------- | ----------------------- | ----------- | ------------------ |
+| _`disable`_    | 禁用 AOS 的判定条件     | 'mobile'    | false              |
+| _`startEvent`_ | 初始化 AOS 的文档事件名 | 'someEvent' | 'DOMContentLoaded' |
 
 ##### 禁用 AOS (disable)
 
 如果您希望在特定设备或条件下禁用动画，可以传入 `disable` 属性：
 
 ```javascript
-  AOS.init({
-    disable: 'mobile'
-  });
+AOS.init({
+  disable: "mobile",
+});
 ```
 
 AOS 支持预设的三种设备名称：`mobile`（包含手机和平板）、`phone`（仅限手机）或 `tablet`（仅限平板）。
@@ -180,7 +202,7 @@ AOS 支持预设的三种设备名称：`mobile`（包含手机和平板）、`p
 此外，您还可以传入自定义判定式：
 
 ```javascript
-  disable: window.innerWidth < 1024
+disable: window.innerWidth < 1024;
 ```
 
 或者传入一个返回布尔值的 `function`：
@@ -197,17 +219,19 @@ AOS 支持预设的三种设备名称：`mobile`（包含手机和平板）、`p
 如果不希望在 `DOMContentLoaded` 时执行初始化，您可以设置自定义的事件，AOS 将在 `document` 上监听该事件：
 
 ```javascript
-  AOS.init({
-    startEvent: 'someCoolEvent'
-  });
+AOS.init({
+  startEvent: "someCoolEvent",
+});
 ```
 
 **重要提示：** 若设置 `startEvent: 'load'`，监听器会被自动附加到 `window` 对象而不是 `document` 上。
+
 ### 🖥 本地演示 (Demo)
 
 AOS Modern 提供了针对核心库及各框架集成的本地 HTML 示例页面，演示了各种动画用法与生命周期特性。
 
 要本地运行 Demo：
+
 1. 克隆本项目仓库
 2. 安装依赖并启动本地开发服务器：
    ```bash
@@ -215,11 +239,11 @@ AOS Modern 提供了针对核心库及各框架集成的本地 HTML 示例页面
    yarn dev
    ```
 3. 在浏览器中打开以下链接：
-    - **官方交互式演示门户**: [http://localhost:8080/](http://localhost:8080/)
-    - **核心库静态示例**：[http://localhost:8080/simple.html](http://localhost:8080/simple.html)
-    - **核心库异步 DOM 侦测**：[http://localhost:8080/async.html](http://localhost:8080/async.html)
-    - **React 挂载/卸载 Hook 演示**：[http://localhost:8080/react.html](http://localhost:8080/react.html)
-    - **Vue Plugin 与指令演示**：[http://localhost:8080/vue.html](http://localhost:8080/vue.html)
+   - **官方交互式演示门户**: [http://localhost:8080/](http://localhost:8080/)
+   - **核心库静态示例**：[http://localhost:8080/simple.html](http://localhost:8080/simple.html)
+   - **核心库异步 DOM 侦测**：[http://localhost:8080/async.html](http://localhost:8080/async.html)
+   - **React 挂载/卸载 Hook 演示**：[http://localhost:8080/react.html](http://localhost:8080/react.html)
+   - **Vue Plugin 与指令演示**：[http://localhost:8080/vue.html](http://localhost:8080/vue.html)
 
 ### 📦 框架集成支持
 
@@ -230,20 +254,16 @@ AOS 现原生提供对现代前端框架（React、Vue）的封装和导出支
 AOS 导出了自定义 React Hook `useAOS` 用于处理挂载初始化与卸载销毁逻辑。
 
 ```javascript
-import React from 'react';
-import { useAOS } from 'aos/react';
+import React from "react";
+import { useAOS } from "aos/react";
 
 function MyComponent() {
   useAOS({
     duration: 1000,
-    once: true
+    once: true,
   });
 
-  return (
-    <div data-aos="fade-up">
-      动画呈现！
-    </div>
-  );
+  return <div data-aos="fade-up">动画呈现！</div>;
 }
 ```
 
@@ -254,19 +274,19 @@ function MyComponent() {
 在应用入口文件（如 `main.js`）中引入：
 
 ```javascript
-import { createApp } from 'vue';
-import { AOSPlugin } from 'aos/vue';
-import App from './App.vue';
+import { createApp } from "vue";
+import { AOSPlugin } from "aos/vue";
+import App from "./App.vue";
 
 const app = createApp(App);
 
 // 注册插件并配置全局选项
 app.use(AOSPlugin, {
   duration: 800,
-  once: false
+  once: false,
 });
 
-app.mount('#app');
+app.mount("#app");
 ```
 
 在组件模板中使用 `v-aos` 指令：
@@ -282,112 +302,110 @@ app.mount('#app');
 <div v-aos="{ animation: 'zoom-in', delay: 200, duration: 600 }"></div>
 ```
 
-
 ### 👻 预设动画列表
 
 您可以使用以下内置的动画样式：
 
-  * 渐变 (Fade):
-    * fade
-    * fade-up
-    * fade-down
-    * fade-left
-    * fade-right
-    * fade-up-right
-    * fade-up-left
-    * fade-down-right
-    * fade-down-left
-
-  * 翻转 (Flip):
-    * flip-up
-    * flip-down
-    * flip-left
-    * flip-right
-
-  * 滑动 (Slide):
-    * slide-up
-    * slide-down
-    * slide-left
-    * slide-right
-
-  * 缩放 (Zoom):
-    * zoom-in
-    * zoom-in-up
-    * zoom-in-down
-    * zoom-in-left
-    * zoom-in-right
-    * zoom-out
-    * zoom-out-up
-    * zoom-out-down
-    * zoom-out-left
-    * zoom-out-right
-
-  * 模糊渐入 (Blur):
-    * blur-in
-    * blur-in-up
-    * blur-in-down
-    * blur-in-left
-    * blur-in-right
-
-  * 倾斜滑入 (Skew):
-    * skew-up
-    * skew-down
-
-  * 旋转滑入 (Rotate):
-    * rotate-in
-    * rotate-in-up-left
-    * rotate-in-up-right
-    * rotate-in-down-left
-    * rotate-in-down-right
-
-  * 回弹缩放 (Back):
-    * back-in
-    * back-in-up
-    * back-in-down
-    * back-in-left
-    * back-in-right
-
-  * 特技动效 (Specials):
-    * roll-in
-    * jack-in-the-box
+- 渐变 (Fade):
+  - fade
+  - fade-up
+  - fade-down
+  - fade-left
+  - fade-right
+  - fade-up-right
+  - fade-up-left
+  - fade-down-right
+  - fade-down-left
+
+- 翻转 (Flip):
+  - flip-up
+  - flip-down
+  - flip-left
+  - flip-right
+
+- 滑动 (Slide):
+  - slide-up
+  - slide-down
+  - slide-left
+  - slide-right
+
+- 缩放 (Zoom):
+  - zoom-in
+  - zoom-in-up
+  - zoom-in-down
+  - zoom-in-left
+  - zoom-in-right
+  - zoom-out
+  - zoom-out-up
+  - zoom-out-down
+  - zoom-out-left
+  - zoom-out-right
+
+- 模糊渐入 (Blur):
+  - blur-in
+  - blur-in-up
+  - blur-in-down
+  - blur-in-left
+  - blur-in-right
+
+- 倾斜滑入 (Skew):
+  - skew-up
+  - skew-down
+
+- 旋转滑入 (Rotate):
+  - rotate-in
+  - rotate-in-up-left
+  - rotate-in-up-right
+  - rotate-in-down-left
+  - rotate-in-down-right
+
+- 回弹缩放 (Back):
+  - back-in
+  - back-in-up
+  - back-in-down
+  - back-in-left
+  - back-in-right
+
+- 特技动效 (Specials):
+  - roll-in
+  - jack-in-the-box
 
 ### 锚点对齐方式 (Anchor placement)
 
-  * top-bottom
-  * top-center
-  * top-top
-  * center-bottom
-  * center-center
-  * center-top
-  * bottom-bottom
-  * bottom-center
-  * bottom-top
-
+- top-bottom
+- top-center
+- top-top
+- center-bottom
+- center-center
+- center-top
+- bottom-bottom
+- bottom-center
+- bottom-top
 
 ### 缓动函数 (Easing functions)
 
 您可以选择不同的运动缓动曲线：
 
-  * linear
-  * ease
-  * ease-in
-  * ease-out
-  * ease-in-out
-  * ease-in-back
-  * ease-out-back
-  * ease-in-out-back
-  * ease-in-sine
-  * ease-out-sine
-  * ease-in-out-sine
-  * ease-in-quad
-  * ease-out-quad
-  * ease-in-out-quad
-  * ease-in-cubic
-  * ease-out-cubic
-  * ease-in-out-cubic
-  * ease-in-quart
-  * ease-out-quart
-  * ease-in-out-quart
+- linear
+- ease
+- ease-in
+- ease-out
+- ease-in-out
+- ease-in-back
+- ease-out-back
+- ease-in-out-back
+- ease-in-sine
+- ease-out-sine
+- ease-in-out-sine
+- ease-in-quad
+- ease-out-quad
+- ease-in-out-quad
+- ease-in-cubic
+- ease-out-cubic
+- ease-in-out-cubic
+- ease-in-quart
+- ease-out-quart
+- ease-in-out-quart
 
 ## ✌️ [Contributing](CONTRIBUTING.md)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aos-modern",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "Animate on scroll library using modern browser APIs",
   "homepage": "https://gabulaideu.github.io/aos/",
   "author": "galun <gabulaideu@gmail.com>",
@@ -11,6 +11,16 @@
     "./react": "./dist/react.js",
     "./vue": "./dist/vue.js"
   },
+  "keywords": [
+    "aos",
+    "aos-modern",
+    "animate-on-scroll",
+    "scroll-animation",
+    "css3-animations",
+    "intersection-observer",
+    "react",
+    "vue"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/gabulaideu/aos.git"