Website animated elements disappearing in mobile view

Question

Some of my elements are animated and they use some JS to detect when being viewed.

In desktop view they work fine, but when in mobile they completely disappear, except for one.

The reason why they disappear is because in their animation they slide say

• -100% X to the left with an opacity of 0
• and move back to 0 X and set their opacity to 1.

I can not figure out how to override the animation. Here is the code for the @media(width: 700px) part (What it should change to when it goes into mobile view on the inspect element tab). Elements that I want to animate are given the "class=hidden" in the HTML, and then referenced in the CSS. When something is viewed the JS adds the class "show" and removes it when not visible. This means that the .show has the final wanted position, and the .hidden and .hidden2 are simply the position they animate from.

@media (max-width: 700px) {
  .hidden:nth-child(1) {
    transition: 0.75s;
    filter: blur(5px);
    transform: translateZ(-100%);
    opacity: 0;
  }
  .hidden:nth-child(2) {
    transition: 0.75s;
    filter: blur(5px);
    transform: translateZ(-100%);
    opacity: 0;
  }
  .hidden:nth-child(3) {
    transition: 0.75s;
    filter: blur(5px);
    transform: translateZ(-100%);
    opacity: 0;
  }
  /*This is the second round of images that animate. */
  .hidden2:nth-child(1) {
    transform: translateZ(-100%);
    opacity: 0;
    filter: blur(5px);
    transition: 1s;
  }
  .hidden2:nth-child(2) {
    transform: translateZ(-100%);
    opacity: 0;
    filter: blur(5px);
    transition: 1s;
    transition-delay: 150ms;
  }
  .hidden2:nth-child(3) {
    transform: translateZ(-100%);
    opacity: 0;
    filter: blur(5px);
    transition: 1s;
    transition-delay: 250ms;-100
  .show:nth-child(1) {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0);
    transform: translateZ(0);
    transform: translateY(0);
  }
  .show:nth-child(2) {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0);
    transform: translateZ(0);
    transform: translateY(0);
  }
  .show:nth-child(3) {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0);
    transform: translateZ(0);
    transform: translateY(0);
  }
}

and the Javascript for observing them is:

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        console.log(entry)
        if (entry.isIntersecting) {
            entry.target.classList.add('show');
        } else {
            entry.target.classList.remove('show');
        }
    });
});
const hiddenElements = document.querySelectorAll(".hidden, .hidden2, .hidden3");
hiddenElements.forEach((el) => observer.observe(el));

Here is the HTML for one of the two groups of showcased images. The items that want to be hidden are given the class "hidden".

   <section class="showcase">
        <!--This is the title, above the images (Not part of them).-->
        <h1>What is it?</h1>
        <p>Create is a minecraft mod created by simibubi that allows you to make Contraptions,<br>
            and automate processes using Rotational Power/Stress Units.<br>
            It adds many mechanical components and block variants to the game.<br>
            Create is also a decoration mod. It adds a total of 550+ Blocks!</p>
        <div class="row">
            <!--This is for each image.-->
            <div class="showcase-col hidden">
                <img src="images/opengates.png">
                <div class="layer">
                    <!--The text at the bottom of the images.-->
                    <h3>THE GEARS<br>BEHIND IT ALL</h3>
                </div>
            </div>
            <div class="showcase-col hidden">
                <img src="images/industrial-1.png">
                <div class="layer">
                    <h3>THE INDUSTRIAL<br>ASPECTS</h3>
                </div>
            </div>
            <div class="showcase-col hidden">
                <img src="images/nature.png">
                <div class="layer">
                    <h3>THE NATURE</h3>
                </div>
            </div>
        </div>
    </section>

I am aiming to have the transitions change to simply fade in from the background instead of from the sides, but I can not manage to override the properties. This is below the previous code btw.

I have tried changing the position of this media query in the CSS, but that resulted in nothing. I have tried redefining everything in the media query so that it should override the previous code, but it hasn't. I was expecting to have the items fade in from the void (From nothing which would be "transform: translateZ(-100%);", but that does nothing.

In summary, I am wondering if there are any flaws in my code, and also how to override statements of animations as they are not currently being overridden.

The link to the temproary site is: "https://musical-bublanina-1b4315.netlify.app/" Where the site can be seen and inspected in mobile view to see the problem.

Answer 1

Turns out all I needed to do was to create a media query that was @media(min-width:701) and put the first bit of code into it to solve that.