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.