I'm going to explain this issue the easiest way i can :
this works ( i can get "entry from above" in the console) :
let count = 0;
const stickyElementsObserver = new IntersectionObserver((entries) =>{
entries.forEach((entry)=>{
if(entry.isIntersecting){
console.log('entry : ', entry.target.id);
if(entry.target.id === 'parfum'){
if(count===0){
title.classList.add('opacityZero');
/*entry.target.classList.add('scaleUp');*/
count = count + 1;
}else if(count > 0){
title.classList.remove('opacityZero');
console.log('-- entry from above --');
count = 0;
}
}
}
});
},{rootMargin: "0px 0px -300px 0px", threshold: 1.0});
argumentsElem.forEach((el)=>stickyElementsObserver.observe(el));
this doesn't : (even if scale up effect from adding scalUp class works i can't get "entry from above" message, and so, all the events that should be fired after, wouldn't) :
let count = 0;
const stickyElementsObserver = new IntersectionObserver((entries) =>{
entries.forEach((entry)=>{
if(entry.isIntersecting){
console.log('entry : ', entry.target.id);
if(entry.target.id === 'parfum'){
if(count===0){
title.classList.add('opacityZero');
entry.target.classList.add('scaleUp');
count = count + 1;
}else if(count > 0){
title.classList.remove('opacityZero');
console.log('-- entry from above --');
count = 0;
}
}
}
});
},{rootMargin: "0px 0px -300px 0px", threshold: 1.0});
argumentsElem.forEach((el)=>stickyElementsObserver.observe(el));
It seems intersectionObserver doesn't recognize entries that have been "dynamically" changed, or whose new classes have been added
EDIT: Issue seems to be resolved by changing entries elements. Entries were div containers instead of elements in it, resulting to some unexpected behavior for me. i think It's because height div was not the same than the element i was looking for. i was scaling up the entire div by 2 resulting to not be able to scroll outside of that div once effect applies ... and get the message i want. Now it works.
however i'm still experiencing some little bugs sometimes depending on how fast i scroll, it's preferable to limit the number of intersectionobserver you create, and also the number of changes or effects linked to them, for a smoother client experience.