On-Scroll Animation Generator

Generate code for animations that trigger as you scroll.

1. Choose Animation

2. Add HTML Class

<div class="animate-on-scroll">...</div>

3. Add CSS

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: none;
}

4. Add JavaScript

document.addEventListener("DOMContentLoaded", function() {
  const animatedElements = document.querySelectorAll('.animate-on-scroll');

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.1 // Trigger when 10% of the element is visible
  });

  animatedElements.forEach(element => {
    observer.observe(element);
  });
});

On-Scroll Animation Generator

1. Choose Animation

2. Add HTML Class

3. Add CSS

4. Add JavaScript

Live Preview

Scroll Down

Item 1

Item 2

Item 3

Item 4