Having multiple triggers with different functionalities:
- Show or remove a canvas
- Change the background color of a section
- Play or pause video when in view
- Play or pause CSS animation
The first two triggers work fine individually, but I am encountering an error with the play/pause video trigger: Uncaught TypeError: Cannot read properties of null (reading 'play'). I have followed the GSAP tutorial, so I suspect there might be a conflict with the previous triggers.
const hideWebGl = gsap.timeline({
scrollTrigger: {
trigger: ".wriggle-cursor",
scrub: true,
start: 'top 100%',
end: 'top -125%',
onEnter: () => $('.home #canvas').css('display','block'),
onLeave: () => $('.home #canvas').css('display','none'),
onEnterBack: () => $('.home #canvas').css('display','block'),
onLeaveBack: () => $('.home #canvas').css('display','none'),
},
});
const projectsBackground = gsap.timeline({
scrollTrigger: {
trigger: ".projects-section-next .whatwedo",
scrub: true,
start: 'top 60%',
end: 'top -300%',
onEnter: () => $('.projects-section-next .whatwedo').css('background-color','white'),
onLeave: () => $('.projects-section-next .whatwedo').css('background-color','transparent'),
onEnterBack: () => $('.projects-section-next .whatwedo').css('background-color','white'),
onLeaveBack: () => $('.projects-section-next .whatwedo').css('background-color','transparent'),
},
});
let allVideoDivs = gsap.utils.toArray('.vid-gsap');
allVideoDivs.forEach((videoDiv, i) => {
let videoElem = videoDiv.querySelector('video')
ScrollTrigger.create({
trigger: videoElem,
start: 'top 80%',
end: 'top 20%',
markers: true,
onEnter: () => videoElem.play(),
onEnterBack: () => videoElem.play(),
onLeave: () => videoElem.pause(),
onLeaveBack: () => videoElem.pause(),
});
});
let allCssAnimation = gsap.utils.toArray('.ticker-marquee');
allCssAnimation.forEach((cssAnimation, i) => {
let cssElem = cssAnimation.querySelector('video')
ScrollTrigger.create({
trigger:cssElem,
start: 'top 80%',
end: 'top 20%',
markers: true,
onEnter: () => cssElem.css('-webkit-animation-play-state','running'),
onLeave: () => cssElem.css('-webkit-animation-play-state','paused'),
onEnterBack: () => cssElem.css('-webkit-animation-play-state','running'),
onLeaveBack: () => cssElem.css('-webkit-animation-play-state','paused'),
});
});