title: Is there a more concise way to write this without a bunch of IF statements?
body: <p>This script uses intersection observer to look for anything with the class ".anim-target" and then looks to see if it also contains another class ("anim-target-NAME") that tells it which class to add. Then it removes it once it's out of view so it can re-animate again. Is there a more concise way to write it without relying on individual IF statements?</p>
  
  <pre><code>document.addEventListener("DOMContentLoaded", function(event) { 
      observer = new IntersectionObserver(entries =&gt; {
          entries.forEach(entry =&gt; {
              if (entry.isIntersecting) {
                  if (entry.target.classList.contains('anim-target-fadeIn')) {
                      entry.target.classList.add('animated', 'fadeIn');
                  }
                  if (entry.target.classList.contains('anim-target-fadeInUp')) {
                      entry.target.classList.add('animated', 'fadeInUp');
                  }
                  if (entry.target.classList.contains('anim-target-bounceIn')) {
                      entry.target.classList.add('animated', 'bounceIn');
                  }
                  if (entry.target.classList.contains('anim-target-zoomIn')) {
                      entry.target.classList.add('animated', 'zoomIn');
                      entry.target.style.opacity = 1;
                  }
              }
              else {
                  entry.target.classList.remove('animated', 'fadeIn', 'fadeInUp', 'bounceIn', 'zoomIn');
                  entry.target.style.opacity = 0;
              }
          });
      });
  
      document.querySelectorAll('.anim-target').forEach(image =&gt; {
          observer.observe(image);
      });
  });
  </code></pre>