<h2 class="mobile">Make screen wider to play animation</h2>
<h2 class="desktop">Make screen smaller</h2>

<section>
  <div class="box purple">CSS</div>
  <div class="box green">GSAP</div>
</section>
body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
  flex-direction: column;
}

section {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}

h2 {
  width: 100%;
  text-align: center;
}

.desktop {
  display: none;
}

.mobile {
  display: block;
}

@media only screen and (min-width: 600px) {
  .desktop {
    display: block;
  }

  .mobile {
    display: none;
  }

  .purple {
    animation: spin 3s infinite linear;
  }
}

/* huzzah! new transform values */
/* https://web.dev/css-individual-transform-properties/ */
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
let mm = gsap.matchMedia();

// add a media query. When it matches, the associated function will run
mm.add("(min-width: 600px)", () => {

 // this code only runs when viewport is under 600px 
 // When the query no longer matches the tween gets killed 🥳
 gsap.to('.green', {
    duration: 3,
    rotation: 360,
    repeat: -1, 
    ease: 'none'
  });

});
Run Pen

External CSS

  1. https://codepen.io/GreenSock/pen/gOWxmWG.css

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js