JavaScript animation not working properly

Question

I have an animation that I'm using from codepen that worked well until a little while back when I was changing some things around. The animation code itself still works fine and is unchanged, but whatever I changed around in my HTML seems to have stopped it from functioning properly. Here's the animation code:

const cards = document.querySelectorAll(".card");

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (
    window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth));

}

function isCardVisible() {
  for (card of cards) {
    isElementInViewport(card) ?
    card.classList.add("isVisible") :
    card.classList.remove("isVisible");
  }
}

document.addEventListener("DOMContentLoaded", isCardVisible);
window.addEventListener("scroll", isCardVisible);
window.addEventListener("resize", isCardVisible);

And here's my HTML and corresponding CSS:

/* cards */
.wrapper {
  width:  auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  overflow-y: hidden;
}

.card {
  margin: 0 3vw;
  width: auto;
  height:  auto;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  border-radius: 3px;
  border: 2px solid #000;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.card-title {
  transition: 0.3s;
  text-align: center;
  font-family: "Space Mono", monospace;
  margin: 2vw 0 0;
  font-size: 2.8vw;
  opacity: 0;
  transform: scale(0.7);
}
.card:last-child:after {
  content: "";
  width: 6vw;
  position: absolute;
  height: 100%;
  right: -6vw;
  top: 0;
}
.card img {
  max-width: 70%;
  max-height: 50vh;
  opacity: 0;
  margin: auto;
  display: block;
  transition: 0.35s;
  transform: rotate(6deg) translate(0, 40px) scaleY(0.6);
}
.card.isVisible img {
  max-width: 100%;
  opacity: 1;
  transform: none;
}
.card.isVisible .card-title {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.card:first-child {
  margin-left: 6vw;
}

How do I keep the animation as it's meant to function, while keeping the same exact format that I have the webpage as right now? Here's the original animation from codepen for reference: https://codepen.io/knyttneve/pen/EGyQqN

If you need to see more of the code for the webpage, please let me know and I will happily supply it.

user_4733161 · Answer

You do that by using intersection observer (IO) instead of listening to scroll events. IO let's you observe elements on a page and react when they come into view or leave the view (intersecting with the viewport) or are intersecting with each other.

You can set threshold, meaning you specify how much of an element has to be intersecting to trigger the callback function.

Prepared a snipped for you, used this article as a reference

const myImgs = document.querySelectorAll('.card');

const options = {
  rootMargin: '0px',
  threshold: 1
};

let observer = new IntersectionObserver((entries) => {
   console.log(entries);
   entries.forEach(entry => {
    if(entry.isIntersecting ) {
       entry.target.classList.add('isVisible');
    } else {
      entry.target.classList.remove('isVisible');
    }
   });
}, options);

myImgs.forEach(image => {observer.observe(image)} );

/* cards */
.wrapper {
  width:  auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  overflow-y: hidden;
}

.card {
  margin: 0 3vw;
  width: auto;
  height:  auto;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  border-radius: 3px;
  border: 2px solid #000;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.card-title {
  transition: 0.3s;
  text-align: center;
  font-family: "Space Mono", monospace;
  margin: 2vw 0 0;
  font-size: 2.8vw;
  opacity: 0;
  transform: scale(0.7);
}
.card:last-child:after {
  content: "";
  width: 6vw;
  position: absolute;
  height: 100%;
  right: -6vw;
  top: 0;
}
.card img {
  max-width: 70%;
  max-height: 50vh;
  opacity: 0;
  margin: auto;
  display: block;
  transition: 0.35s;
  transform: rotate(6deg) translate(0, 40px) scaleY(0.6);
}
.card.isVisible img {
  max-width: 100%;
  opacity: 1;
  transform: none;
}
.card.isVisible .card-title {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.card:first-child {
  margin-left: 6vw;
}

 

  
    
    Pikachu
  
  
    
    Alakazam
  
  
    
    Arbok
  
  
    
    Bulbasaur
  
  
    
    Pikachu
  
  
    
    Alakazam
  
  
    
    Arbok
  
  
    
    Bulbasaur

user_17803626 · Answer

So.. I see only difference between the codepen and your example. And its overflow:

-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
overflow-y: hidden;

You have two options, check both of them in snippet below:

Erase them will cause this effect:

const cards = document.querySelectorAll(".card");

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (
    window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth));

}

function isCardVisible() {
  for (card of cards) {
    isElementInViewport(card) ?
    card.classList.add("isVisible") :
    card.classList.remove("isVisible");
  }
}

document.addEventListener("DOMContentLoaded", isCardVisible);
window.addEventListener("scroll", isCardVisible);
window.addEventListener("resize", isCardVisible)

.wrapper {
  width:  auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
 /* -ms-overflow-style: none;  
  scrollbar-width: none;  
  overflow-y: hidden;*/
}

.card {
  margin: 0 3vw;
  width: auto;
  height:  auto;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  border-radius: 3px;
  border: 2px solid #000;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.card-title {
  transition: 0.3s;
  text-align: center;
  font-family: "Space Mono", monospace;
  margin: 2vw 0 0;
  font-size: 2.8vw;
  opacity: 0;
  transform: scale(0.7);
}
.card:last-child:after {
  content: "";
  width: 6vw;
  position: absolute;
  height: 100%;
  right: -6vw;
  top: 0;
}
.card img {
  max-width: 70%;
  max-height: 50vh;
  opacity: 0;
  margin: auto;
  display: block;
  transition: 0.35s;
  transform: rotate(6deg) translate(0, 40px) scaleY(0.6);
}
.card.isVisible img {
  max-width: 100%;
  opacity: 1;
  transform: none;
}
.card.isVisible .card-title {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.card:first-child {
  margin-left: 6vw;
}

Or you can show the scrollbar under the pictures:

const cards = document.querySelectorAll(".card");

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (
    window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth));

}

function isCardVisible() {
  for (card of cards) {
    isElementInViewport(card) ?
    card.classList.add("isVisible") :
    card.classList.remove("isVisible");
  }
}

document.addEventListener("DOMContentLoaded", isCardVisible);
window.addEventListener("scroll", isCardVisible);
window.addEventListener("resize", isCardVisible)

  /* cards */
.wrapper {
  width:  auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  -ms-overflow-style: scroll;  /* IE and Edge */
  scrollbar-width: thin;  /* Firefox */
  overflow-y: scroll;
}

.card {
  margin: 0 3vw;
  width: auto;
  height:  auto;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  border-radius: 3px;
  border: 2px solid #000;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}
.card-title {
  transition: 0.3s;
  text-align: center;
  font-family: "Space Mono", monospace;
  margin: 2vw 0 0;
  font-size: 2.8vw;
  opacity: 0;
  transform: scale(0.7);
}
.card:last-child:after {
  content: "";
  width: 6vw;
  position: absolute;
  height: 100%;
  right: -6vw;
  top: 0;
}
.card img {
  max-width: 70%;
  max-height: 50vh;
  opacity: 0;
  margin: auto;
  display: block;
  transition: 0.35s;
  transform: rotate(6deg) translate(0, 40px) scaleY(0.6);
}
.card.isVisible img {
  max-width: 100%;
  opacity: 1;
  transform: none;
}
.card.isVisible .card-title {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.card:first-child {
  margin-left: 6vw;
}

Is there something else, which didnt work? I will need to see the rest of the code.

JavaScript animation not working properly

2 Answers