<div>
  <h1>gsap.matchMedia()</h1>
  <hr>
  <h2>Aspect Ratio Demo</h2>
</div>

<svg viewBox="0 0 500 1500" stroke="#000" stroke-width="5" fill="none">
  <rect x="50" y="100" width="400" height="300" />
  <rect x="100" y="500" width="300" height="300" />
  <rect x="100" y="900" width="300" height="400" />
</svg>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1,
h2 {
  text-align: center;
  font-weight: 300;
  font-family: "Signika Negative", sans-serif, Arial;
  margin: 0;
  padding: 26px;
  font-size: 38px;
  font-weight: 400;
}
h2 {
  font-size: 32px;
  opacity: 0.5;
}
@media (max-width: 640px) {
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 18px;
  }
}

svg {
  width: 100%;
  height: 100%;
  max-width: 80vw;
  max-height: 80vh;
  position: relative;
  top: 0;
}

hr {
  width: 100%;
}
gsap.registerPlugin(ScrollTrigger); // matchMedia() requires ScrollTrigger plugin

const wideRatio = '(min-aspect-ratio: 4/3)',
      midRatio = '(min-aspect-ratio: 3/4) and (max-aspect-ratio: 4/3)',
      tallRatio = '(max-aspect-ratio: 3/4)'

const mm = gsap.matchMedia()

mm.add(wideRatio, ()=>{ // wide aspect ratio screen
  gsap.set('rect', {
    attr:{'stroke-dasharray':(i)=>(i==0)?'10 10':''}
  })
})

mm.add(midRatio, ()=>{ // mid (squarish) aspect ratio screen
  gsap.set('rect', {
    attr:{'stroke-dasharray':(i)=>(i==1)?'10 10':''}
  })
})

mm.add(tallRatio, ()=>{ // tall (narrow) aspect ratio screen
  gsap.set('rect', {
    attr:{'stroke-dasharray':(i)=>(i==2)?'10 10':''}
  })
})

gsap.to('rect', {
  attr:{'stroke-dashoffset':-20},
  ease:'none',
  repeat:-1
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://assets.codepen.io/16327/gsap-latest-beta.min.js
  2. https://assets.codepen.io/16327/ScrollTrigger.min.js