Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dartmoon-io/aos-responsive
https://github.com/dartmoon-io/aos-responsive
library
Last synced: 28 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/dartmoon-io/aos-responsive
- Owner: dartmoon-io
- License: mit
- Created: 2021-08-12T20:20:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-08-30T18:44:14.000Z (over 1 year ago)
- Last Synced: 2024-11-17T09:47:44.015Z (about 1 month ago)
- Topics: library
- Language: JavaScript
- Homepage:
- Size: 98.6 KB
- Stars: 0
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AOS Responsive
Make [Animate On Scroll](https://michalsnik.github.io/aos/) responsive! With this module you can ovveride the attributes of AOS as you would do it in CSS.
This package uses mobile first. This means that normal `data-aos-*` attributes are valid from mobile devices to larger ones and you can ovveride them using breakpoints.
### Installation
```bash
yarn add @dartmoon/aos-responsive
```
or
```bash
npm i @dartmoon/aos-responsive --save
```
### Usage
How to use it? Exactly like you would do with the standard AOS library!
```js
import AOS from '@dartmoon/aos-responsive'
AOS.init({
// You AOS configs
})
```
### How to use it?
Simply put a breakpoint name before the attribute.
```html
...
```
So now on mobile we will get the beautiful `fade-up` animation, while starting from the `md` breakpoint you will have `fade-right`.
### Default breakpoints
Breakpoints have been inspired by [Tailwind CSS](https://tailwindcss.com/docs/breakpoints).
```js
'sm': '640px',
// => @media (min-width: 640px) { ... }
'md': '768px',
// => @media (min-width: 768px) { ... }
'lg': '1024px',
// => @media (min-width: 1024px) { ... }
'xl': '1280px',
// => @media (min-width: 1280px) { ... }
'2xl': '1536px',
// => @media (min-width: 1536px) { ... }
```
If you want you can even override them.
```js
import AOS from '@dartmoon/aos-responsive'
AOS.init({
// ... your AOS configs
breakpoints: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
}
})
```
So now you can do something like this:
```html
...
```
### Disable some attributes override
Maybe you don't want to override all attributes of AOS.
```js
import AOS from '@dartmoon/aos-responsive'
AOS.init({
// ... your AOS configs
attributes: [
'aos'
]
})
```
Now, only `data-aos` will be checked against the breakpoint overrides.
Just to be clear:
```html
...
...
```
## License
This project is licensed under the MIT License - see the LICENSE.md file for details