scroll trigger video controls

[Marci]

Hello,

 

So I'm doing a website with GSAP and one of my videos also has sound which is connected to ScrollTrigger. I decided to add the controls to the video but the problem is that when scrolling down only the controls appear but not the video and if the video and the control appear which I tried with another video I can not start it either mute/unmute it because the buttons are not sensitive. My point would be that while scrolling, when the video reaches a certain opacity it will start playing and if someone clicks the unmute button it eventually unmutes the video. For me it would be the best (if someone knows how to do it) that the video can not be stopped or played manually, the user only has the control over the sound which is muted as default. (In the demo the controls and the video work too however at me the described problem remains, I just created it so you can see what I am speaking about). I hope you understand, it is a bit complicated... Someone could help? 

See the Pen oNmBoLm by Drummer20 (@Drummer20) on CodePen

[GreenSock]

Hopefully this will get you going in the right direction: 

See the Pen NWodydV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

• Browsers won't allow auto play (without user interaction) unless the video is muted.
• I just created a timeline with the ScrollTrigger so that I could place a simple callback right in the middle and then I sense the direction (forwards or backwards) from the timeline.scrollTrigger.direction property and either play() or pause() the video accordingly

Does that help?