aos
aos copied to clipboard
michalsnik
Css scroll snap compatibility
This is:
- Bug
Specifications
- AOS version: 2.3.4
- OS: MacOS
- Browser: Chrome, Firefox and Safari 12.0
Expected Behavior
When i use the css scroll-snap-type: mandatory, aos-animate class must be added to the node
Actual Behavior
aos-animate class is NOT added to the node and animation are not triggered
Steps to Reproduce the Problem
- Put this css on a container
height: 100vh;
overflow-y: scroll;
scroll-snap-points-y: repeat(100vh);
scroll-snap-destination: 0 0;
scroll-snap-type: y mandatory;
scroll-snap-type: mandatory;
This css on child :
scroll-snap-align: start;
height: 100%;
- Install aos
- And add data-aos="fade-up" on the childs
- AOS animation doesn't trigger
Does anyone else know how to fix this issue? I'm facing the same problem as well. Is there any event to hook?
I have the exact same issue. Did anyone find a hack to fix or a real fix for this incompatibility? I have a codepen with this implemented that demonstrates the bug here: https://codepen.io/Julianoe/pen/PoqbWmm
This issue will soon be one year old. Anyone?
This is working for me so far. It requires you to add .aos class to any element you're animating. It didn't seem to work with the .aos-init class, probably because that's added from the JS.
const aosAnimation = document.querySelectorAll('.aos');
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
entry.target.classList.add('aos-animate');
} else {
entry.target.classList.remove('aos-animate');
}
});
});
aosAnimation.forEach(aosObject => {
observer.observe(aosObject);
});
I'm not quite sure i'm understanding what you suggest. My code did not the .aos-init class to work to activate the animations on scroll. But once i add the scroll snap. Still not working :( I added the .aos class in my code but it does not change anything. Would you mind giving a fork of that codepen? Are you using AOS v2 ?
const aosAnimation = document.querySelectorAll('.aos'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('aos-animate'); } else { entry.target.classList.remove('aos-animate'); } }); }); aosAnimation.forEach(aosObject => { observer.observe(aosObject); });
This works! however data-aos-offset is not working anymore. do you also know how to fix this?
Having the same issue here. Anyone manage to resolve it? Using it with Gatsby.js
In the end I used the fullpage.js library which got the scrolljack effect.
having same issue .. i thought it may be because of using library so i tried getting scroll position , but not even getting the scroll position and also this function is not executing
document.body.onscroll = function (e) { var position = window.scrollY; console.log(position); }
Someone help!!
Also having the same issue. does anyone have already a fix for this? huhu :(
Added this and worked.
const aosAnimation = document.querySelectorAll('[data-aos]');
observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
entry.target.classList.add('aos-animate');
} else {
entry.target.classList.remove('aos-animate');
}
});
});
aosAnimation.forEach(aosObject => {
observer.observe(aosObject);
});
where to import the observer from on the solution in this sorry for being ignorant I am really new to this if someone please reply
const aosAnimation = document.querySelectorAll('[data-aos]'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('aos-animate'); } else { entry.target.classList.remove('aos-animate'); } }); }); aosAnimation.forEach(aosObject => { observer.observe(aosObject); });
Along with the code add the className in the tag of aos effect "aos-init aos-animate" these to tags on className and attach the code snippet is below in the component they should work on any project
const aosAnimation = document.querySelectorAll('[data-aos]'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('aos-animate'); } else { entry.target.classList.remove('aos-animate'); } }); }); aosAnimation.forEach(aosObject => { observer.observe(aosObject); });
aos doesnot work with overflow-y: scroll; property. If you want to use overflow property you need to refresh AOS on scroll of the window event, which can be triggered as
document.addEventListener('scroll', (event) => { AOS.refresh();}, {capture: true, passive: true,})
Note to pass capture property else event will not triggred on oveflow property.
This codepen worked fine for me. No other code needed.... https://codepen.io/fatty1996/pen/NWPjMdq
Hii guys ,
i have found the solution . document.addEventListener('scroll', (event) => { const aosAnimation = document.querySelectorAll('[data-aos]'); observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.intersectionRatio > 0) { entry.target.classList.add('aos-animate'); } else { entry.target.classList.remove('aos-animate'); } }); }); aosAnimation.forEach(aosObject => { observer.observe(aosObject); });}, {capture: true, passive: true,})
try this.
paste it in index.html in script tag before
