Match Media

Recipe 7.6 Add a slide-in animation

Code:

<script>
const mediaQuery = window.matchMedia('(prefers-reduced-motion: no-preference)');

// Check when the JS file is executed    
if (mediaQuery.matches) {
  console.log('add animation')
}

// Listen for changes
mediaQuery.addEventListener('change', () => {
  if (mediaQuery.matches) {
    console.log('add animation')
  } else {
    console.log('reduce animation')
  }
});
</script>