CSS Scroll Animation Generator

/* Add to your CSS */
@keyframes scroll-fade-up {
  from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}

/* Apply to elements */
.animate-on-scroll {
  opacity: 0;
  animation: none;
}

.animate-on-scroll.is-visible {
  animation: scroll-fade-up 600ms ease-out 0ms forwards;
}

/* JavaScript to trigger */
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-visible');
      observer.unobserve(entry.target); // run once
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));