Make Animate On Scroll 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.
yarn add @dartmoon/aos-responsive
or
npm i @dartmoon/aos-responsive --save
How to use it? Exactly like you would do with the standard AOS library!
import AOS from '@dartmoon/aos-responsive'
AOS.init({
// You AOS configs
})
Simply put a breakpoint name before the attribute.
<div data-aos="fade-up" data-md-aos="fade-right">...</div>
So now on mobile we will get the beautiful fade-up
animation, while starting from the md
breakpoint you will have fade-right
.
Breakpoints have been inspired by Tailwind CSS.
'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.
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:
<div data-aos="fade-up" data-tablet-aos="fade-right">...</div>
Maybe you don't want to override all attributes of AOS.
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:
<!-- This will work -->
<div data-aos="fade-up" data-md-aos="fade-right">...</div>
<!-- This will NOT work -->
<div data-aos="fade-up" data-aos-duration="1200" data-md-aos-duration="900">...</div>
This project is licensed under the MIT License - see the LICENSE.md file for details