AOS - Animate on scroll library

NPM version NPM downloads Build Status Gitter

Twitter Follow Twitter URL

❗❗❗ This is README for aos@next ❗❗❗

For last stable release (v2) go here


🚀 Demo

🌟 Codepen Examples

👉 To get a better understanding how this actually works, I encourage you to check my post on CSS-tricks.


⚙ Installation

Basic

Add styles in <head>:

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Add script right before closing </body> tag, and initialize AOS:

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

Using package managers

Install aos package:

  • yarn add aos@next
  • or npm install --save aos@next

Import script, styles and initialize AOS:

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();

In order to make it work you'll have to make sure your build process has configured styles loader, and bundles it all correctly. If you're using Parcel however, it will work out of the box as provided.


🤔 How to use it?

1. Initialize AOS:

AOS.init();

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
  

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

2. Set animation using data-aos attribute:

  <div data-aos="fade-in"></div>

And adjust behaviour by using data-aos-* attributes:

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

See full list of all animations, easings and anchor placements

Anchor

There is also a setting that can be used only on per-element basis:

  • data-aos-anchor - element whose offset will be used to trigger animation instead of an actual one.

Examples:

<div data-aos="fade-up" data-aos-anchor=".other-element"></div>

This way you can trigger animation on one element, while you scroll to another - useful in animating fixed elements.


API

AOS object is exposed as a global variable, for now there are three 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)

Example execution:

  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.

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.


JS Events

AOS 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:

document.addEventListener('aos:in', ({ detail }) => {
  console.log('animated in', detail);
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('animated out', detail);
});

You can also tell AOS to trigger custom event on specific element, by setting data-aos-id attribute:

<div data-aos="fade-in" data-aos-id="super-duper"></div>

Then you'll be able to listen for two custom events then:

  • aos:in:super-duper
  • aos:out:super-duper

Recipes:

Adding custom animations:

Sometimes built-in animations are just not enough. Let's say you need one box to have different animation depending on resolution. Here's how you could do it:

[data-aos="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;

  &.aos-animate {
    opacity: 1;
  }

  @media screen and (min-width: 768px) {
    transform: translateX(100px);

    &.aos-animate {
      transform: translateX(0);
    }
  }
}

Then use it in HTML:

<div data-aos="new-animation"></div>

The element will only animate opacity on mobile devices, but from 768px width it'll also slide from right to left.

Adding custom easing:

Similar to animations you can add custom easings:

[data-aos] {
  body[data-aos-easing="new-easing"] &,
  &[data-aos][data-aos-easing="new-easing"] {
    transition-timing-function: cubic-bezier(.250, .250, .750, .750);
  }
}

Customizing default animations distance

Default distance for built-in animations is 100px. As long as you're using SCSS though, you can override it:

$aos-distance: 200px; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss';

You have to however configure your build process to allow it to import styles from node_modules beforehand.

Integrating external CSS animation library (e.g. Animate.css):

Use animatedClassName to change default behaviour of AOS, to apply class names placed inside data-aos on scroll.

<div data-aos="fadeInUp"></div>
AOS.init({
  useClassNames: true,
  initClassName: false,
  animatedClassName: 'animated',
});

The 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.

External 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:

[data-aos] {
  visibility: hidden;
}
[data-aos].animated {
  visibility: visible;
}

Caveats:

setting: duration, delay

Duration 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.

If not, you can write simple CSS that will add another duration, for example:

  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. Notice 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 :)

Example usage:

  <div data-aos="fade-in" data-aos-duration="4000"></div>

Predefined options

Animations

  • 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

Anchor placements:

  • 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

❔Questions

If you found a bug, have a question or an idea, please check AOS contribution guide and don't hesitate to create new issues.

michalsnik/aos

{
"props": {
"initialPayload": {
"allShortcutsEnabled": false,
"path": "/",
"repo": {
"id": 38836015,
"defaultBranch": "next",
"name": "aos",
"ownerLogin": "michalsnik",
"currentUserCanPush": false,
"isFork": false,
"isEmpty": false,
"createdAt": "2015-07-09T17:49:00.000Z",
"ownerAvatar": "https://avatars.githubusercontent.com/u/4093559?v=4",
"public": true,
"private": false,
"isOrgOwned": false
},
"currentUser": null,
"refInfo": {
"name": "next",
"listCacheKey": "v0:1670537884.888171",
"canEdit": false,
"refType": "branch",
"currentOid": "329fb34f777034345f4d3f4def4dc3bcc300cc2e"
},
"tree": {
"items": [
{
"name": "cypress",
"path": "cypress",
"contentType": "directory"
},
{
"name": "demo",
"path": "demo",
"contentType": "directory"
},
{
"name": "scripts",
"path": "scripts",
"contentType": "directory"
},
{
"name": "src",
"path": "src",
"contentType": "directory"
},
{
"name": ".babelrc",
"path": ".babelrc",
"contentType": "file"
},
{
"name": ".editorconfig",
"path": ".editorconfig",
"contentType": "file"
},
{
"name": ".eslintrc.json",
"path": ".eslintrc.json",
"contentType": "file"
},
{
"name": ".gitattributes",
"path": ".gitattributes",
"contentType": "file"
},
{
"name": ".gitignore",
"path": ".gitignore",
"contentType": "file"
},
{
"name": ".npmignore",
"path": ".npmignore",
"contentType": "file"
},
{
"name": ".travis.yml",
"path": ".travis.yml",
"contentType": "file"
},
{
"name": "CONTRIBUTING.md",
"path": "CONTRIBUTING.md",
"contentType": "file"
},
{
"name": "ISSUE_TEMPLATE.md",
"path": "ISSUE_TEMPLATE.md",
"contentType": "file"
},
{
"name": "LICENSE",
"path": "LICENSE",
"contentType": "file"
},
{
"name": "PULL_REQUEST_TEMPLATE.md",
"path": "PULL_REQUEST_TEMPLATE.md",
"contentType": "file"
},
{
"name": "README.md",
"path": "README.md",
"contentType": "file"
},
{
"name": "cypress.json",
"path": "cypress.json",
"contentType": "file"
},
{
"name": "package.json",
"path": "package.json",
"contentType": "file"
},
{
"name": "rollup.config.js",
"path": "rollup.config.js",
"contentType": "file"
},
{
"name": "yarn.lock",
"path": "yarn.lock",
"contentType": "file"
}
],
"templateDirectorySuggestionUrl": null,
"readme": null,
"totalCount": 20,
"showBranchInfobar": false
},
"fileTree": null,
"fileTreeProcessingTime": null,
"foldersToFetch": [],
"treeExpanded": false,
"symbolsExpanded": false,
"isOverview": true,
"overview": {
"banners": {
"shouldRecommendReadme": false,
"isPersonalRepo": false,
"showUseActionBanner": false,
"actionSlug": null,
"actionId": null,
"showProtectBranchBanner": false,
"recentlyTouchedDataChannel": null,
"publishBannersInfo": {
"dismissActionNoticePath": "/settings/dismiss-notice/publish_action_from_repo",
"releasePath": "/michalsnik/aos/releases/new?marketplace=true",
"showPublishActionBanner": false
},
"interactionLimitBanner": null,
"showInvitationBanner": false,
"inviterName": null
},
"codeButton": {
"contactPath": "/contact",
"isEnterprise": false,
"local": {
"protocolInfo": {
"httpAvailable": true,
"sshAvailable": null,
"httpUrl": "https://github.com/michalsnik/aos.git",
"showCloneWarning": null,
"sshUrl": null,
"sshCertificatesRequired": null,
"sshCertificatesAvailable": null,
"ghCliUrl": "gh repo clone michalsnik/aos",
"defaultProtocol": "http",
"newSshKeyUrl": "/settings/ssh/new",
"setProtocolPath": "/users/set_protocol"
},
"platformInfo": {
"cloneUrl": "https://desktop.github.com",
"showVisualStudioCloneButton": false,
"visualStudioCloneUrl": "https://windows.github.com",
"showXcodeCloneButton": false,
"xcodeCloneUrl": "https://developer.apple.com",
"zipballUrl": "/michalsnik/aos/archive/refs/heads/next.zip"
}
},
"newCodespacePath": "/codespaces/new?hide_repo_select=true&repo=38836015"
},
"popovers": {
"rename": null,
"renamedParentRepo": null
},
"commitCount": "259",
"overviewFiles": [
{
"displayName": "README.md",
"repoName": "aos",
"refName": "next",
"path": "README.md",
"preferredFileType": "readme",
"tabName": "README",
"richText": "<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\"><p dir=\"auto\"><a href=\"http://michalsnik.github.io/aos/\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/3064d696438d43fecf70861c5471a468059ca22cb99261f779886708bd24512e/68747470733a2f2f7333322e706f7374696d672e6f72672f6b7476743539686f6c2f616f735f6865616465722e706e67\" alt=\"AOS - Animate on scroll library\" data-canonical-src=\"https://s32.postimg.org/ktvt59hol/aos_header.png\" style=\"max-width: 100%;\"></a></p>\n<p dir=\"auto\"><a href=\"https://npmjs.org/package/aos\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/c7297192aecf69ad14f8cffb4e00571ffe72ad89dd2914a6d5267eead1b0db53/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f616f732f6e6578742e7376673f7374796c653d666c6174\" alt=\"NPM version\" data-canonical-src=\"https://img.shields.io/npm/v/aos/next.svg?style=flat\" style=\"max-width: 100%;\"></a>\n<a href=\"https://npmjs.org/package/aos\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/3d5287f23abbdc15d6eb0d1778153896a15e68cda2973833a5f8c85c07888fb7/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f616f732e7376673f7374796c653d666c6174\" alt=\"NPM downloads\" data-canonical-src=\"https://img.shields.io/npm/dm/aos.svg?style=flat\" style=\"max-width: 100%;\"></a>\n<a href=\"https://travis-ci.org/michalsnik/aos\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/11562df22d8e2b8d144055e2d402924f17e5ce3e2afe5fe3c825cf44066b684c/68747470733a2f2f7472617669732d63692e6f72672f6d696368616c736e696b2f616f732e7376673f6272616e63683d6d6173746572\" alt=\"Build Status\" data-canonical-src=\"https://travis-ci.org/michalsnik/aos.svg?branch=master\" style=\"max-width: 100%;\"></a>\n<a href=\"https://gitter.im/michalsnik/aos?utm_source=badge&amp;utm_medium=badge&amp;utm_campaign=pr-badge\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/c85e342f20f61b6634aad60e68e10a4276c029dfc3c9d70523496d61b9cfa97c/68747470733a2f2f6261646765732e6769747465722e696d2f6d696368616c736e696b2f616f732e737667\" alt=\"Gitter\" data-canonical-src=\"https://badges.gitter.im/michalsnik/aos.svg\" style=\"max-width: 100%;\"></a></p>\n<p dir=\"auto\"><a href=\"https://twitter.com/michalsnik\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/8f4e53c699a6aaf63339f327717d6bd94ed8d8b4646a5c81e9dd6b4a9aa3f645/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f6d696368616c736e696b2e7376673f7374796c653d736f6369616c\" alt=\"Twitter Follow\" data-canonical-src=\"https://img.shields.io/twitter/follow/michalsnik.svg?style=social\" style=\"max-width: 100%;\"></a> <a href=\"https://twitter.com/home?status=AOS%20-%20Animate%20on%20Scroll%20library%0Ahttps%3A//github.com/michalsnik/aos\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/a00d957c85627f2862ae61b59289e25f875e9ae40a716efdf5c3e032d6b8f863/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f75726c2f687474702f736869656c64732e696f2e7376673f7374796c653d736f6369616c\" alt=\"Twitter URL\" data-canonical-src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\" style=\"max-width: 100%;\"></a></p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-exclamationexclamationexclamation-this-is-readme-for-aosnext-exclamationexclamationexclamation\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#exclamationexclamationexclamation-this-is-readme-for-aosnext-exclamationexclamationexclamation\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>❗❗❗ This is README for aos@next ❗❗❗</h2>\n<p dir=\"auto\">For last stable release (v2) go <a href=\"https://github.com/michalsnik/aos/tree/v2\">here</a></p>\n<hr>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content--demo\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#-demo\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>🚀 <a href=\"http://michalsnik.github.io/aos/\" rel=\"nofollow\">Demo</a></h3>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content--codepen-examples\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#-codepen-examples\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>🌟 Codepen Examples</h3>\n<ul dir=\"auto\">\n<li><a href=\"http://codepen.io/michalsnik/pen/WxNdvq\" rel=\"nofollow\">Different built-in animations</a></li>\n<li><a href=\"http://codepen.io/michalsnik/pen/jrOYVO\" rel=\"nofollow\">With anchor setting in use</a></li>\n<li><a href=\"http://codepen.io/michalsnik/pen/EyxoNm\" rel=\"nofollow\">With anchor-placement and different easings</a></li>\n<li><a href=\"http://codepen.io/michalsnik/pen/WxvNvE\" rel=\"nofollow\">With simple custom animations</a></li>\n</ul>\n<p dir=\"auto\">👉 To get a better understanding how this actually works, I encourage you to check <a href=\"https://css-tricks.com/aos-css-driven-scroll-animation-library/\" rel=\"nofollow\">my post on CSS-tricks</a>.</p>\n<hr>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content--installation\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#-installation\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>⚙ Installation</h2>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-basic\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#basic\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Basic</h3>\n<p dir=\"auto\">Add styles in <code>&lt;head&gt;</code>:</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/aos@next/dist/aos.css&quot; /&gt;\"><pre> <span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">link</span> <span class=\"pl-c1\">rel</span>=\"<span class=\"pl-s\">stylesheet</span>\" <span class=\"pl-c1\">href</span>=\"<span class=\"pl-s\">https://unpkg.com/aos@next/dist/aos.css</span>\" /&gt;</pre></div>\n<p dir=\"auto\">Add script right before closing <code>&lt;/body&gt;</code> tag, and initialize AOS:</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" &lt;script src=&quot;https://unpkg.com/aos@next/dist/aos.js&quot;&gt;&lt;/script&gt;\n &lt;script&gt;\n AOS.init();\n &lt;/script&gt;\"><pre> <span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">script</span> <span class=\"pl-c1\">src</span>=\"<span class=\"pl-s\">https://unpkg.com/aos@next/dist/aos.js</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">script</span><span class=\"pl-kos\">&gt;</span>\n <span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">script</span><span class=\"pl-kos\">&gt;</span>\n <span class=\"pl-c1\">AOS</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">init</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n <span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">script</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-using-package-managers\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#using-package-managers\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Using package managers</h3>\n<p dir=\"auto\">Install <code>aos</code> package:</p>\n<ul dir=\"auto\">\n<li><code>yarn add aos@next</code></li>\n<li>or <code>npm install --save aos@next</code></li>\n</ul>\n<p dir=\"auto\">Import script, styles and initialize AOS:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import AOS from 'aos';\nimport 'aos/dist/aos.css'; // You can also use &lt;link&gt; for styles\n// ..\nAOS.init();\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-c1\">AOS</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'aos'</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-k\">import</span> <span class=\"pl-s\">'aos/dist/aos.css'</span><span class=\"pl-kos\">;</span> <span class=\"pl-c\">// You can also use &lt;link&gt; for styles</span>\n<span class=\"pl-c\">// ..</span>\n<span class=\"pl-c1\">AOS</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">init</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\">In 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 <a href=\"https://parceljs.org/\" rel=\"nofollow\">Parcel</a> however, it will work out of the box as provided.</p>\n<hr>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content--how-to-use-it\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#-how-to-use-it\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>🤔 How to use it?</h2>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-1-initialize-aos\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#1-initialize-aos\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>1. Initialize AOS:</h3>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"AOS.init();\n\n// You can also pass an optional settings object\n// below listed default settings\nAOS.init({\n // Global settings:\n disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function\n startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on\n initClassName: 'aos-init', // class applied after initialization\n animatedClassName: 'aos-animate', // class applied on animation\n useClassNames: false, // if true, will add content of `data-aos` as classes on scroll\n disableMutationObserver: false, // disables automatic mutations' detections (advanced)\n debounceDelay: 50, // the delay on debounce used while resizing window (advanced)\n throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)\n \n\n // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:\n offset: 120, // offset (in px) from the original trigger point\n delay: 0, // values from 0 to 3000, with step 50ms\n duration: 400, // values from 0 to 3000, with step 50ms\n easing: 'ease', // default easing for AOS animations\n once: false, // whether animation should happen only once - while scrolling down\n mirror: false, // whether elements should animate out while scrolling past them\n anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation\n\n});\"><pre><span class=\"pl-c1\">AOS</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">init</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-c\">// You can also pass an optional settings object</span>\n<span class=\"pl-c\">// below listed default settings</span>\n<span class=\"pl-c1\">AOS</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">init</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span>\n <span class=\"pl-c\">// Global settings:</span>\n <span class=\"pl-c1\">disable</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function</span>\n <span class=\"pl-c1\">startEvent</span>: <span class=\"pl-s\">'DOMContentLoaded'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// name of the event dispatched on the document, that AOS should initialize on</span>\n <span class=\"pl-c1\">initClassName</span>: <span class=\"pl-s\">'aos-init'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// class applied after initialization</span>\n <span class=\"pl-c1\">animatedClassName</span>: <span class=\"pl-s\">'aos-animate'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// class applied on animation</span>\n <span class=\"pl-c1\">useClassNames</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// if true, will add content of `data-aos` as classes on scroll</span>\n <span class=\"pl-c1\">disableMutationObserver</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// disables automatic mutations' detections (advanced)</span>\n <span class=\"pl-c1\">debounceDelay</span>: <span class=\"pl-c1\">50</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// the delay on debounce used while resizing window (advanced)</span>\n <span class=\"pl-c1\">throttleDelay</span>: <span class=\"pl-c1\">99</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// the delay on throttle used while scrolling the page (advanced)</span>\n \n\n <span class=\"pl-c\">// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:</span>\n <span class=\"pl-c1\">offset</span>: <span class=\"pl-c1\">120</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// offset (in px) from the original trigger point</span>\n <span class=\"pl-c1\">delay</span>: <span class=\"pl-c1\">0</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// values from 0 to 3000, with step 50ms</span>\n <span class=\"pl-c1\">duration</span>: <span class=\"pl-c1\">400</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// values from 0 to 3000, with step 50ms</span>\n <span class=\"pl-c1\">easing</span>: <span class=\"pl-s\">'ease'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// default easing for AOS animations</span>\n <span class=\"pl-c1\">once</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// whether animation should happen only once - while scrolling down</span>\n <span class=\"pl-c1\">mirror</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// whether elements should animate out while scrolling past them</span>\n <span class=\"pl-c1\">anchorPlacement</span>: <span class=\"pl-s\">'top-bottom'</span><span class=\"pl-kos\">,</span> <span class=\"pl-c\">// defines which position of the element regarding to window should trigger the animation</span>\n\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-2-set-animation-using-data-aos-attribute\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#2-set-animation-using-data-aos-attribute\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>2. Set animation using <code>data-aos</code> attribute:</h3>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" &lt;div data-aos=&quot;fade-in&quot;&gt;&lt;/div&gt;\"><pre> <span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">div</span> <span class=\"pl-c1\">data-aos</span>=\"<span class=\"pl-s\">fade-in</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">div</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<p dir=\"auto\">And adjust behaviour by using <code>data-aos-*</code> attributes:</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" &lt;div\n data-aos=&quot;fade-up&quot;\n data-aos-offset=&quot;200&quot;\n data-aos-delay=&quot;50&quot;\n data-aos-duration=&quot;1000&quot;\n data-aos-easing=&quot;ease-in-out&quot;\n data-aos-mirror=&quot;true&quot;\n data-aos-once=&quot;false&quot;\n data-aos-anchor-placement=&quot;top-center&quot;\n &gt;\n &lt;/div&gt;\"><pre> <span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">div</span>\n <span class=\"pl-c1\">data-aos</span>=\"<span class=\"pl-s\">fade-up</span>\"\n <span class=\"pl-c1\">data-aos-offset</span>=\"<span class=\"pl-s\">200</span>\"\n <span class=\"pl-c1\">data-aos-delay</span>=\"<span class=\"pl-s\">50</span>\"\n <span class=\"pl-c1\">data-aos-duration</span>=\"<span class=\"pl-s\">1000</span>\"\n <span class=\"pl-c1\">data-aos-easing</span>=\"<span class=\"pl-s\">ease-in-out</span>\"\n <span class=\"pl-c1\">data-aos-mirror</span>=\"<span class=\"pl-s\">true</span>\"\n <span class=\"pl-c1\">data-aos-once</span>=\"<span class=\"pl-s\">false</span>\"\n <span class=\"pl-c1\">data-aos-anchor-placement</span>=\"<span class=\"pl-s\">top-center</span>\"\n <span class=\"pl-kos\">&gt;</span>\n <span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">div</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<p dir=\"auto\"><a href=\"https://github.com/michalsnik/aos#animations\">See full list of all animations, easings and anchor placements</a></p>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-anchor\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#anchor\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Anchor</h4>\n<p dir=\"auto\">There is also a setting that can be used only on per-element basis:</p>\n<ul dir=\"auto\">\n<li><code>data-aos-anchor</code> - element whose offset will be used to trigger animation instead of an actual one.</li>\n</ul>\n<p dir=\"auto\">Examples:</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;div data-aos=&quot;fade-up&quot; data-aos-anchor=&quot;.other-element&quot;&gt;&lt;/div&gt;\"><pre><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">div</span> <span class=\"pl-c1\">data-aos</span>=\"<span class=\"pl-s\">fade-up</span>\" <span class=\"pl-c1\">data-aos-anchor</span>=\"<span class=\"pl-s\">.other-element</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">div</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<p dir=\"auto\">This way you can trigger animation on one element, while you scroll to another - useful in animating fixed elements.</p>\n<hr>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-api\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#api\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>API</h2>\n<p dir=\"auto\">AOS object is exposed as a global variable, for now there are three methods available:</p>\n<ul dir=\"auto\">\n<li><code>init</code> - initialize AOS</li>\n<li><code>refresh</code> - recalculate all offsets and positions of elements (called on window resize)</li>\n<li><code>refreshHard</code> - reinit array with AOS elements and trigger <code>refresh</code> (called on DOM changes that are related to <code>aos</code> elements)</li>\n</ul>\n<p dir=\"auto\">Example execution:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" AOS.refresh();\"><pre> <span class=\"pl-c1\">AOS</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">refresh</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\">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 <code>refreshHard</code> automatically. In browsers that don't support <code>MutationObserver</code> like IE you might need to call <code>AOS.refreshHard()</code> by yourself.</p>\n<p dir=\"auto\"><code>refresh</code> 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.</p>\n<hr>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-js-events\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#js-events\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>JS Events</h2>\n<p dir=\"auto\">AOS dispatches two events on document: <code>aos:in</code> and <code>aos:out</code> whenever any element animates in or out, so that you can do extra stuff in JS:</p>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"document.addEventListener('aos:in', ({ detail }) =&gt; {\n console.log('animated in', detail);\n});\n\ndocument.addEventListener('aos:out', ({ detail }) =&gt; {\n console.log('animated out', detail);\n});\"><pre><span class=\"pl-smi\">document</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">addEventListener</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'aos:in'</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span> detail <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-smi\">console</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">log</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'animated in'</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">detail</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n\n<span class=\"pl-smi\">document</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">addEventListener</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'aos:out'</span><span class=\"pl-kos\">,</span> <span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span> detail <span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span> <span class=\"pl-c1\">=&gt;</span> <span class=\"pl-kos\">{</span>\n <span class=\"pl-smi\">console</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">log</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'animated out'</span><span class=\"pl-kos\">,</span> <span class=\"pl-s1\">detail</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\">You can also tell AOS to trigger custom event on specific element, by setting <code>data-aos-id</code> attribute:</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;div data-aos=&quot;fade-in&quot; data-aos-id=&quot;super-duper&quot;&gt;&lt;/div&gt;\"><pre><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">div</span> <span class=\"pl-c1\">data-aos</span>=\"<span class=\"pl-s\">fade-in</span>\" <span class=\"pl-c1\">data-aos-id</span>=\"<span class=\"pl-s\">super-duper</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">div</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<p dir=\"auto\">Then you'll be able to listen for two custom events then:</p>\n<ul dir=\"auto\">\n<li><code>aos:in:super-duper</code></li>\n<li><code>aos:out:super-duper</code></li>\n</ul>\n<hr>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-recipes\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#recipes\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Recipes:</h2>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-adding-custom-animations\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#adding-custom-animations\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Adding custom animations:</h4>\n<p dir=\"auto\">Sometimes 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:</p>\n<div class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"[data-aos=&quot;new-animation&quot;] {\n opacity: 0;\n transition-property: transform, opacity;\n\n &amp;.aos-animate {\n opacity: 1;\n }\n\n @media screen and (min-width: 768px) {\n transform: translateX(100px);\n\n &amp;.aos-animate {\n transform: translateX(0);\n }\n }\n}\"><pre>[<span class=\"pl-c1\">data-aos</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"new-animation\"</span>] {\n <span class=\"pl-c1\">opacity</span><span class=\"pl-kos\">:</span> <span class=\"pl-c1\">0</span>;\n <span class=\"pl-c1\">transition-property</span><span class=\"pl-kos\">:</span> transform<span class=\"pl-kos\">,</span> opacity;\n\n <span class=\"pl-ent\">&amp;</span>.<span class=\"pl-c1\">aos-animate</span> {\n <span class=\"pl-c1\">opacity</span><span class=\"pl-kos\">:</span> <span class=\"pl-c1\">1</span>;\n }\n\n <span class=\"pl-k\">@media</span> screen <span class=\"pl-c1\">and</span> (<span class=\"pl-c1\">min-width</span><span class=\"pl-kos\">:</span> <span class=\"pl-c1\">768<span class=\"pl-smi\">px</span></span>) {\n <span class=\"pl-c1\">transform</span><span class=\"pl-kos\">:</span> <span class=\"pl-en\">translateX</span>(<span class=\"pl-c1\">100<span class=\"pl-smi\">px</span></span>);\n\n <span class=\"pl-ent\">&amp;</span>.<span class=\"pl-c1\">aos-animate</span> {\n <span class=\"pl-c1\">transform</span><span class=\"pl-kos\">:</span> <span class=\"pl-en\">translateX</span>(<span class=\"pl-c1\">0</span>);\n }\n }\n}</pre></div>\n<p dir=\"auto\">Then use it in HTML:</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;div data-aos=&quot;new-animation&quot;&gt;&lt;/div&gt;\"><pre><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">div</span> <span class=\"pl-c1\">data-aos</span>=\"<span class=\"pl-s\">new-animation</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">div</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<p dir=\"auto\">The element will only animate opacity on mobile devices, but from 768px width it'll also slide from right to left.</p>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-adding-custom-easing\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#adding-custom-easing\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Adding custom easing:</h4>\n<p dir=\"auto\">Similar to animations you can add custom easings:</p>\n<div class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"[data-aos] {\n body[data-aos-easing=&quot;new-easing&quot;] &amp;,\n &amp;[data-aos][data-aos-easing=&quot;new-easing&quot;] {\n transition-timing-function: cubic-bezier(.250, .250, .750, .750);\n }\n}\"><pre>[<span class=\"pl-c1\">data-aos</span>] {\n <span class=\"pl-ent\">body</span>[<span class=\"pl-c1\">data-aos-easing</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"new-easing\"</span>] <span class=\"pl-ent\">&amp;</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-ent\">&amp;</span>[<span class=\"pl-c1\">data-aos</span>][<span class=\"pl-c1\">data-aos-easing</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">\"new-easing\"</span>] {\n <span class=\"pl-c1\">transition-timing-function</span><span class=\"pl-kos\">:</span> <span class=\"pl-en\">cubic-bezier</span>(<span class=\"pl-c1\">.250</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">.250</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">.750</span><span class=\"pl-kos\">,</span> <span class=\"pl-c1\">.750</span>);\n }\n}</pre></div>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-customizing-default-animations-distance\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#customizing-default-animations-distance\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Customizing default animations distance</h4>\n<p dir=\"auto\">Default distance for built-in animations is 100px. As long as you're using SCSS though, you can override it:</p>\n<div class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"$aos-distance: 200px; // It has to be above import\n@import 'node_modules/aos/src/sass/aos.scss';\"><pre>$aos<span class=\"pl-c1\">-</span>distance<span class=\"pl-kos\">:</span> 200px; <span class=\"pl-c1\">/</span><span class=\"pl-c1\">/</span> It has <span class=\"pl-k\">to</span> be above imp<span class=\"pl-c1\">or</span>t\n<span class=\"pl-k\">@import</span> <span class=\"pl-s\">'node_modules/aos/src/sass/aos.scss'</span>;</pre></div>\n<p dir=\"auto\">You have to however configure your build process to allow it to import styles from <code>node_modules</code> beforehand.</p>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-integrating-external-css-animation-library-eg-animatecss\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#integrating-external-css-animation-library-eg-animatecss\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Integrating external CSS animation library (e.g. Animate.css):</h4>\n<p dir=\"auto\">Use <code>animatedClassName</code> to change default behaviour of AOS, to apply class names placed inside <code>data-aos</code> on scroll.</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;div data-aos=&quot;fadeInUp&quot;&gt;&lt;/div&gt;\"><pre><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">div</span> <span class=\"pl-c1\">data-aos</span>=\"<span class=\"pl-s\">fadeInUp</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">div</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"AOS.init({\n useClassNames: true,\n initClassName: false,\n animatedClassName: 'animated',\n});\"><pre><span class=\"pl-c1\">AOS</span><span class=\"pl-kos\">.</span><span class=\"pl-en\">init</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">useClassNames</span>: <span class=\"pl-c1\">true</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">initClassName</span>: <span class=\"pl-c1\">false</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">animatedClassName</span>: <span class=\"pl-s\">'animated'</span><span class=\"pl-kos\">,</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<p dir=\"auto\">The above element will get two classes: <code>animated</code> and <code>fadeInUp</code>. Using different combinations of the three above settings, you should be able to integrate any external CSS animation library.</p>\n<p dir=\"auto\">External 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:</p>\n<div class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"[data-aos] {\n visibility: hidden;\n}\n[data-aos].animated {\n visibility: visible;\n}\"><pre>[<span class=\"pl-c1\">data-aos</span>] {\n <span class=\"pl-c1\">visibility</span><span class=\"pl-kos\">:</span> hidden;\n}\n[<span class=\"pl-c1\">data-aos</span>].<span class=\"pl-c1\">animated</span> {\n <span class=\"pl-c1\">visibility</span><span class=\"pl-kos\">:</span> visible;\n}</pre></div>\n<hr>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-caveats\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#caveats\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Caveats:</h2>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-setting-duration-delay\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#setting-duration-delay\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>setting: <code>duration</code>, <code>delay</code></h4>\n<p dir=\"auto\">Duration 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.</p>\n<p dir=\"auto\">If not, you can write simple CSS that will add another duration, for example:</p>\n<div class=\"highlight highlight-source-css notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" body[data-aos-duration='4000'] [data-aos],\n [data-aos][data-aos][data-aos-duration='4000'] {\n transition-duration: 4000ms;\n }\"><pre> <span class=\"pl-ent\">body</span>[<span class=\"pl-c1\">data-aos-duration</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">'4000'</span>] [<span class=\"pl-c1\">data-aos</span>]<span class=\"pl-kos\">,</span>\n [<span class=\"pl-c1\">data-aos</span>][<span class=\"pl-c1\">data-aos</span>][<span class=\"pl-c1\">data-aos-duration</span><span class=\"pl-c1\">=</span><span class=\"pl-s\">'4000'</span>] {\n <span class=\"pl-c1\">transition-duration</span><span class=\"pl-kos\">:</span> <span class=\"pl-c1\">4000<span class=\"pl-smi\">ms</span></span>;\n }</pre></div>\n<p dir=\"auto\">This 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 <code>[data-aos][data-aos]</code> - it's not a mistake, it is a trick, to make individual settings more important than global, without need to write ugly \"!important\" there :)</p>\n<p dir=\"auto\">Example usage:</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\" &lt;div data-aos=&quot;fade-in&quot; data-aos-duration=&quot;4000&quot;&gt;&lt;/div&gt;\"><pre> <span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">div</span> <span class=\"pl-c1\">data-aos</span>=\"<span class=\"pl-s\">fade-in</span>\" <span class=\"pl-c1\">data-aos-duration</span>=\"<span class=\"pl-s\">4000</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">div</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<hr>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-predefined-options\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#predefined-options\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Predefined options</h2>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-animations\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#animations\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Animations</h3>\n<ul dir=\"auto\">\n<li>\n<p dir=\"auto\">Fade animations:</p>\n<ul dir=\"auto\">\n<li>fade</li>\n<li>fade-up</li>\n<li>fade-down</li>\n<li>fade-left</li>\n<li>fade-right</li>\n<li>fade-up-right</li>\n<li>fade-up-left</li>\n<li>fade-down-right</li>\n<li>fade-down-left</li>\n</ul>\n</li>\n<li>\n<p dir=\"auto\">Flip animations:</p>\n<ul dir=\"auto\">\n<li>flip-up</li>\n<li>flip-down</li>\n<li>flip-left</li>\n<li>flip-right</li>\n</ul>\n</li>\n<li>\n<p dir=\"auto\">Slide animations:</p>\n<ul dir=\"auto\">\n<li>slide-up</li>\n<li>slide-down</li>\n<li>slide-left</li>\n<li>slide-right</li>\n</ul>\n</li>\n<li>\n<p dir=\"auto\">Zoom animations:</p>\n<ul dir=\"auto\">\n<li>zoom-in</li>\n<li>zoom-in-up</li>\n<li>zoom-in-down</li>\n<li>zoom-in-left</li>\n<li>zoom-in-right</li>\n<li>zoom-out</li>\n<li>zoom-out-up</li>\n<li>zoom-out-down</li>\n<li>zoom-out-left</li>\n<li>zoom-out-right</li>\n</ul>\n</li>\n</ul>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-anchor-placements\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#anchor-placements\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Anchor placements:</h3>\n<ul dir=\"auto\">\n<li>top-bottom</li>\n<li>top-center</li>\n<li>top-top</li>\n<li>center-bottom</li>\n<li>center-center</li>\n<li>center-top</li>\n<li>bottom-bottom</li>\n<li>bottom-center</li>\n<li>bottom-top</li>\n</ul>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-easing-functions\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#easing-functions\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Easing functions:</h3>\n<ul dir=\"auto\">\n<li>linear</li>\n<li>ease</li>\n<li>ease-in</li>\n<li>ease-out</li>\n<li>ease-in-out</li>\n<li>ease-in-back</li>\n<li>ease-out-back</li>\n<li>ease-in-out-back</li>\n<li>ease-in-sine</li>\n<li>ease-out-sine</li>\n<li>ease-in-out-sine</li>\n<li>ease-in-quad</li>\n<li>ease-out-quad</li>\n<li>ease-in-out-quad</li>\n<li>ease-in-cubic</li>\n<li>ease-out-cubic</li>\n<li>ease-in-out-cubic</li>\n<li>ease-in-quart</li>\n<li>ease-out-quart</li>\n<li>ease-in-out-quart</li>\n</ul>\n<hr>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-questions\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#questions\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>❔Questions</h2>\n<p dir=\"auto\">If you found a bug, have a question or an idea, please check <a href=\"/michalsnik/aos/blob/next/CONTRIBUTING.md\">AOS contribution guide</a> and don't hesitate to create new issues.</p>\n</article>",
"loaded": true,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": [
{
"level": 2,
"text": ":exclamation::exclamation::exclamation: This is README for aos@next :exclamation::exclamation::exclamation:",
"anchor": "exclamationexclamationexclamation-this-is-readme-for-aosnext-exclamationexclamationexclamation",
"htmlText": "❗❗❗ This is README for aos@next ❗❗❗"
},
{
"level": 3,
"text": "🚀 Demo",
"anchor": "-demo",
"htmlText": "🚀 Demo"
},
{
"level": 3,
"text": "🌟 Codepen Examples",
"anchor": "-codepen-examples",
"htmlText": "🌟 Codepen Examples"
},
{
"level": 2,
"text": "⚙ Installation",
"anchor": "-installation",
"htmlText": "⚙ Installation"
},
{
"level": 3,
"text": "Basic",
"anchor": "basic",
"htmlText": "Basic"
},
{
"level": 3,
"text": "Using package managers",
"anchor": "using-package-managers",
"htmlText": "Using package managers"
},
{
"level": 2,
"text": "🤔 How to use it?",
"anchor": "-how-to-use-it",
"htmlText": "🤔 How to use it?"
},
{
"level": 3,
"text": "1. Initialize AOS:",
"anchor": "1-initialize-aos",
"htmlText": "1. Initialize AOS:"
},
{
"level": 3,
"text": "2. Set animation using data-aos attribute:",
"anchor": "2-set-animation-using-data-aos-attribute",
"htmlText": "2. Set animation using data-aos attribute:"
},
{
"level": 4,
"text": "Anchor",
"anchor": "anchor",
"htmlText": "Anchor"
},
{
"level": 2,
"text": "API",
"anchor": "api",
"htmlText": "API"
},
{
"level": 2,
"text": "JS Events",
"anchor": "js-events",
"htmlText": "JS Events"
},
{
"level": 2,
"text": "Recipes:",
"anchor": "recipes",
"htmlText": "Recipes:"
},
{
"level": 4,
"text": "Adding custom animations:",
"anchor": "adding-custom-animations",
"htmlText": "Adding custom animations:"
},
{
"level": 4,
"text": "Adding custom easing:",
"anchor": "adding-custom-easing",
"htmlText": "Adding custom easing:"
},
{
"level": 4,
"text": "Customizing default animations distance",
"anchor": "customizing-default-animations-distance",
"htmlText": "Customizing default animations distance"
},
{
"level": 4,
"text": "Integrating external CSS animation library (e.g. Animate.css):",
"anchor": "integrating-external-css-animation-library-eg-animatecss",
"htmlText": "Integrating external CSS animation library (e.g. Animate.css):"
},
{
"level": 2,
"text": "Caveats:",
"anchor": "caveats",
"htmlText": "Caveats:"
},
{
"level": 4,
"text": "setting: duration, delay",
"anchor": "setting-duration-delay",
"htmlText": "setting: duration, delay"
},
{
"level": 2,
"text": "Predefined options",
"anchor": "predefined-options",
"htmlText": "Predefined options"
},
{
"level": 3,
"text": "Animations",
"anchor": "animations",
"htmlText": "Animations"
},
{
"level": 3,
"text": "Anchor placements:",
"anchor": "anchor-placements",
"htmlText": "Anchor placements:"
},
{
"level": 3,
"text": "Easing functions:",
"anchor": "easing-functions",
"htmlText": "Easing functions:"
},
{
"level": 2,
"text": "❔Questions",
"anchor": "questions",
"htmlText": "❔Questions"
}
],
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fmichalsnik%2Faos"
}
},
{
"displayName": "LICENSE",
"repoName": "aos",
"refName": "next",
"path": "LICENSE",
"preferredFileType": "license",
"tabName": "MIT",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fmichalsnik%2Faos"
}
}
],
"overviewFilesProcessingTime": 21.61139
}
},
"appPayload": {
"helpUrl": "https://docs.github.com",
"findFileWorkerPath": "/assets-cdn/worker/find-file-worker-32bb159cc57c.js",
"findInFileWorkerPath": "/assets-cdn/worker/find-in-file-worker-c6704d501c10.js",
"githubDevUrl": null,
"enabled_features": {
"code_nav_ui_events": false,
"copilot_conversational_ux": false,
"copilot_conversational_ux_embedding_update": false,
"copilot_popover_file_editor_header": false,
"copilot_smell_icebreaker_ux": true,
"copilot_workspace": false,
"codeview_firefox_inert": true
}
}
}
}
{
"accept-ranges": "bytes",
"cache-control": "max-age=0, private, must-revalidate",
"content-encoding": "gzip",
"content-security-policy": "default-src 'none'; base-uri 'self'; child-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com api.githubcopilot.com objects-origin.githubusercontent.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 26 Feb 2024 11:20:04 GMT",
"etag": "49572acc9c7b0e64387d4145199a3eb2",
"referrer-policy": "no-referrer-when-downgrade",
"server": "GitHub.com",
"set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Wed, 26 Feb 2025 11:20:04 GMT; HttpOnly; Secure; SameSite=Lax",
"strict-transport-security": "max-age=31536000; includeSubdomains; preload",
"transfer-encoding": "chunked",
"vary": "X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, Accept-Encoding, Accept, X-Requested-With",
"x-content-type-options": "nosniff",
"x-frame-options": "deny",
"x-github-request-id": "DAD8:21134C:1BE69A1:27D359E:65DC73E1",
"x-xss-protection": "0"
}