CODEWITHSUNDEEP
javascriptcssintersection-observer
Sackadelic
Sackadelic

Reputation: 1019

Do Intersection Observer Animation and Hover effects not work together?

I'm working on a project that is using Intersection Observer to add animation to an element's style upon entry. However, what I'm noticing is that the : hover attribute no longer works when I apply the style. Am I doing this wrong, or, are these two not compatible? On the JS Fiddle, I've commented out the hover attribute by default. Try uncommenting it and see what happens.

I've tried banner.classList.add(/new class in here/) but that method also took away the :hover as well. DEMO: Demo

Upvotes: 0

Views: 744

Answers (1)

Ayman Morsy
Ayman Morsy

Reputation: 1419

disable animation on hover because animations has a higher specificity

const options = {
  root: null,
  threshold: 1,
};

const banner = document.querySelector('.product-banner');

const observerAnim = new IntersectionObserver(function(entries, observer) {

  entries.forEach(entry => {

    if (!entry.isIntersecting) {
      return;
    }
    banner.style.animation = '1s ease-in-out home-page-fade';
    banner.style.animationFillMode = 'forwards';
    observer.unobserve(banner);
  });

}, options);

observerAnim.observe(banner);
body {
  background-color: #fff;
  min-height: 2000px;
}

img.product-banner {
  opacity:0;
  position: relative;
  top: 1000px;
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;
}

@keyframes home-page-fade {
  0% {
    transform: translateY(50%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


img.product-banner:hover {
  animation: none !important;
  opacity: 0.8;
  transform: scale(0.9);
  -moz-transition: all ease 0.3s;
  -webkit-transition: all ease 0.3s;
  transition: all ease 0.3s;

}
<h1>
    Scroll Effect
  </h1>

  <img class="product-banner" src="https://cdn.mos.cms.futurecdn.net/bQgcMwEnyhFu6ASuUFrtsn-1024-80.jpg" width="300">

Upvotes: 1

Related Questions