Roxana

Great, thank you so much!

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.