GSAP Scrolltrigger not working with multiple triggers

Question

I have multiple triggers each does the following:

Show/Removes a canvas
Changes the background colour of a section
Plays/Pauses video when in view
Plays/Pauses CSS animation

The first two work when without the other 2 triggers and I get this error on the play pause video: Uncaught TypeError: Cannot read properties of null (reading 'play') However, I have followed the GSAP tutorial on this so I can only assume there is 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'),
  });
  
});

Diced Mango · Accepted Answer · 2023-01-14 14:21:42Z

0

I changed the video play pause section to this, and it fixed it.

const videos = gsap.utils.toArray('video')

videos.forEach(function(video, i) {
    
  ScrollTrigger.create({
    trigger: video,
    start: 'top center',
    end: 'bottom center',
    onEnter: () => video.play(),
    onEnterBack: () => video.play(),
    onLeave: () => video.pause(),
    onLeaveBack: () => video.pause(),
  });
})

answered Jan 14, 2023 at 14:21

Diced Mango

113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack Over a year ago

Instead of 4 callbacks, you could use onToggle like: onToggle: self => self.isActive ? video.play() : video.pause();

Collectives™ on Stack Overflow

GSAP Scrolltrigger not working with multiple triggers

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related