Remove/add timeline animation when the window inner width is greater/lower than a breakpoint

[Roxana]

I'm trying to remove a timeline animation below 940px or add it above 940px. I want the animation to be removed or added on resize or when the mobile orientation is changed. Here is my code:

const scrollTrigger = {
    trigger: '.js-hero-pin',
    start: 0,
    end: 700,
    scrub: true,
    pin: true,
    pinSpacing: true,
    anticipatePin: 1,
    toggleActions: 'play pause reverse pause'
  }

  let timeline = gsap.timeline()
  function timelineAnimation() {
    if (document.querySelector('.js-hero-video')) {
      timeline.from('.js-hero-video', {
        position: 'fixed',
        top: 0,
        right: 0,
        left: 0,
        width: '100vw',
        height: '100vh',
        scrollTrigger: scrollTrigger
      })

      timeline.to('.js-hero-text', {
        opacity: 0,
        display: 'none',
        scrollTrigger: scrollTrigger
      })

      timeline.from('.js-hero-content', {
        marginTop: '100vh',
        scrollTrigger: scrollTrigger
      })

      timeline.to('.js-hero-content', {
        opacity: 1,
        scrollTrigger: scrollTrigger
      })

      timeline.from('.js-sticky-bar', {
        display: 'none',
        zIndex: -1,
        scrollTrigger: {
          start: 400,
          end: 700,
          scrub: true,
          toggleActions: 'play pause reverse pause'
        }
      })

      timeline.to('.js-sticky-bar', {
        opacity: 1,
        scrollTrigger: {
          start: 400,
          end: 700,
          scrub: true,
          toggleActions: 'play pause reverse pause'
        }
      })
    }
  }
  window.addEventListener('load', () => {
    if (window.innerWidth > 940) {
      timelineAnimation()
    }
  })

  window.addEventListener('resize', () => {
    if (window.innerWidth <= 940) {
      if (timeline) {
        ScrollTrigger.disable()
      }
    } else {
      timelineAnimation()
      ScrollTrigger.enable()
    }
  })

When I resize the window or change the mobile orientation, I'd like to remove or add all the animations, with all the CSS properties.

[elegantseagulls]

This may be helpful if you are using ScrollTrigger, which it seems you are: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

[Roxana]

Great, thank you so much!