How do i restrict a animation using javascript to certain screen size?

Question

I made an animation of cards stacked over one another. When I click on the top-most one it disappears and all the cards below it change their position one by one. I used transform translate property with javascript for this. But on mobile screens, some cards are going out of the view area. I want to remove this animation from mobile screens. How can I do this?

 let card1 = document.querySelector('#card1'); let card2 = document.querySelector('#card2'); let card3 = document.querySelector('#card3'); let card4 = document.querySelector('#card4'); let card5 = document.querySelector('#card5'); let card6 = document.querySelector('#card6'); let card7 = document.querySelector('#card7'); let card8 = document.querySelector('#card8'); let cardW = document.querySelector('#cardW'); cardW.addEventListener('click', function() { card1.style.transform = "translate(350px,0px)"; card2.style.transform = "translate(-350px, 0px)"; card3.style.transform = "translate(350px , 300px)"; card4.style.transform = "translate(-350px , -300px)"; card5.style.transform = "translate(-350px , 300px)"; card6.style.transform = "translate(350px , -300px)"; card7.style.transform = "translate(0px , -300px)"; card8.style.transform = "translate(0px , 300px)"; cardW.style.opacity = "0"; });

 .card-container { margin: 180px 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .card { text-align:center; background: blue; position: absolute; width: 240px; height: 250px; color: #fff; border-radius:20px; transition: 1.6s ease; background-size: contain; background-position: center; } #card1{ transition-delay:0.2s; } #card2{ transition-delay:0.4s; } #card3{ transition-delay:0.6s; } #card4{ transition-delay:0.8s; } #card5{ transition-delay:1s; } #card6{ transition-delay:1.2s; } #card7{ transition-delay:1.4s; } #card8{ transition-delay:1.6s; }

 <div class="card-container"> <div class="card" id="card8"> <div class="card-content"> <div class="card-title"> <h1>Title8</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card7"> <div class="card-content"> <div class="card-title"> <h1>Title7</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card6"> <div class="card-content"> <div class="card-title"> <h1>Title6</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card5"> <div class="card-content"> <div class="card-title"> <h1>Titl5</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card4"> <div class="card-content"> <div class="card-title"> <h1>Title4</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card3"> <div class="card-content"> <div class="card-title"> <h1>Title3</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card2"> <div class="card-content"> <div class="card-title"> <h1>Title2</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card1"> <div class="card-content"> <div class="card-title"> <h1>Title1</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="cardW"> <h3>Wrapper Card</h3> </div> </div>

Answer 1

Media queries in JavaScript

So yeah, you can use media queries in JavaScript, eg

var mquery = window.matchMedia('(min-width: 768px)');

if (mquery.matches) {
  // do stuff
}

Browser support is reasonable. There are methods to check window size ( window.innerWidth , element.getBoundingClientRect ) that are supported by older browsers, but if you're using CSS transforms it probably rules out a lot of the truly ancient browsers anyway.

MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

So in your case you might do:

 /* Smaller media query so that the snippet works. obviously if it were 768px the snippet wouldn't work, and you'd need an event listener on window resize event to set up the animations for when the snippet is expanded... Easier if you just change the media query and test it on your machine */ let mquery = window.matchMedia('(min-width: 480px)'); if (mquery.matches) { setupAnimation(); } function setupAnimation () { let card1 = document.querySelector('#card1'); let card2 = document.querySelector('#card2'); let card3 = document.querySelector('#card3'); let card4 = document.querySelector('#card4'); let card5 = document.querySelector('#card5'); let card6 = document.querySelector('#card6'); let card7 = document.querySelector('#card7'); let card8 = document.querySelector('#card8'); let cardW = document.querySelector('#cardW'); cardW.addEventListener('click', function() { card1.style.transform = "translate(350px,0px)"; card2.style.transform = "translate(-350px, 0px)"; card3.style.transform = "translate(350px , 300px)"; card4.style.transform = "translate(-350px , -300px)"; card5.style.transform = "translate(-350px , 300px)"; card6.style.transform = "translate(350px , -300px)"; card7.style.transform = "translate(0px , -300px)"; card8.style.transform = "translate(0px , 300px)"; cardW.style.opacity = "0"; }); }

 .card-container { margin: 180px 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .card { text-align:center; background: blue; position: absolute; width: 240px; height: 250px; color: #fff; border-radius:20px; transition: 1.6s ease; background-size: contain; background-position: center; } #card1{ transition-delay:0.2s; } #card2{ transition-delay:0.4s; } #card3{ transition-delay:0.6s; } #card4{ transition-delay:0.8s; } #card5{ transition-delay:1s; } #card6{ transition-delay:1.2s; } #card7{ transition-delay:1.4s; } #card8{ transition-delay:1.6s; }

 <div class="card-container"> <div class="card" id="card8"> <div class="card-content"> <div class="card-title"> <h1>Title8</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card7"> <div class="card-content"> <div class="card-title"> <h1>Title7</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card6"> <div class="card-content"> <div class="card-title"> <h1>Title6</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card5"> <div class="card-content"> <div class="card-title"> <h1>Titl5</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card4"> <div class="card-content"> <div class="card-title"> <h1>Title4</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card3"> <div class="card-content"> <div class="card-title"> <h1>Title3</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card2"> <div class="card-content"> <div class="card-title"> <h1>Title2</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card1"> <div class="card-content"> <div class="card-title"> <h1>Title1</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="cardW"> <h3>Wrapper Card</h3> </div> </div>

---

Alternatively...

As a side note, you could also move all of the translate properties to CSS where they can be put into a CSS media query, assign a CSS class on click in JS, and the end result would be the same.

 let cards = [].slice.call(document.querySelectorAll('.card')); let cardW = document.querySelector('#cardW'); cardW.addEventListener('click', function() { cards.forEach(function(card){card.classList.add('transformed')}); cardW.classList.add('hidden'); });

 .card-container { margin: 180px 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } .card { text-align:center; background: blue; position: absolute; width: 240px; height: 250px; color: #fff; border-radius:20px; transition: 1.6s ease; background-size: contain; background-position: center; } #card1{ transition-delay:0.2s; } #card2{ transition-delay:0.4s; } #card3{ transition-delay:0.6s; } #card4{ transition-delay:0.8s; } #card5{ transition-delay:1s; } #card6{ transition-delay:1.2s; } #card7{ transition-delay:1.4s; } #card8{ transition-delay:1.6s; } @media (min-width: 768px) { #cardW.hidden {opacity:0} #card1.transformed {transform: translate(350px,0px) } #card2.transformed {transform: translate(-350px, 0px) } #card3.transformed {transform: translate(350px , 300px) } #card4.transformed {transform: translate(-350px , -300px) } #card5.transformed {transform: translate(-350px , 300px) } #card6.transformed {transform: translate(350px , -300px) } #card7.transformed {transform: translate(0px , -300px) } #card8.transformed {transform: translate(0px , 300px) } }

 <div class="card-container"> <div class="card" id="card8"> <div class="card-content"> <div class="card-title"> <h1>Title8</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card7"> <div class="card-content"> <div class="card-title"> <h1>Title7</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card6"> <div class="card-content"> <div class="card-title"> <h1>Title6</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card5"> <div class="card-content"> <div class="card-title"> <h1>Titl5</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card4"> <div class="card-content"> <div class="card-title"> <h1>Title4</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card3"> <div class="card-content"> <div class="card-title"> <h1>Title3</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card2"> <div class="card-content"> <div class="card-title"> <h1>Title2</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="card1"> <div class="card-content"> <div class="card-title"> <h1>Title1</h1> </div> <div class="card-description"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntm.</p> </div> </div> </div> <div class="card" id="cardW"> <h3>Wrapper Card</h3> </div> </div>

Answer 2

Try checking the width of window using window.innerWidth and add animation based on the width of window user is using.

cardW.addEventListener('click', function() {
    if (window.innerWidth >= {something})
    {
        {your animation}
    }
});