document.addEventListener('DOMContentLoaded', ()=> {
const elementsToAnimate=document.querySelectorAll('[data-ui-animation]');
const observer=new IntersectionObserver((entries, observer)=> {
entries.forEach(entry=> {
if(!entry.isIntersecting) return;
const el=entry.target;
const animationName=el.getAttribute("data-ui-animation");
const animationSpeed=el.getAttribute("data-ui-duration");
if(animationSpeed==="fast"){
el.classList.add("animated", "animated-fast");
}else if(animationSpeed==="slow"){
el.classList.add("animated", "animated-slow");
}else{
el.classList.add("animated");
}
if(animationName){
el.classList.add(...animationName.split(" "));
}
const onStart=()=> {
el.classList.remove("uicore-animate-hide");
el.removeEventListener("animationstart", onStart);
};
el.addEventListener("animationstart", onStart, {
once: true
});
requestAnimationFrame(()=> {
if(getComputedStyle(el).animationDelay==="0s"){
el.classList.remove("uicore-animate-hide");
}});
observer.unobserve(el);
});
}, {
rootMargin: '10px',
threshold: 0 
});
elementsToAnimate.forEach(element=> {
observer.observe(element);
});
});