Jump to content
Search Community

ScrollTrigger Video Pause/Play on Locomotive Scroll

Jase test
Moderator Tag

Recommended Posts

Having trouble getting this to work with Locomotive Scroll. Works fine when locomotive scroll is disabled.

 

gsap.registerPlugin(ScrollTrigger);

let allVideoDivs = gsap.utils.toArray('.vid');

allVideoDivs.forEach((videoDiv, i) => {
  
  let videoElem = videoDiv.querySelector('video')
  
  ScrollTrigger.create({
    trigger: videoElem,
    start: 'top 70%',
    end: 'bottom 30%',
    markers: true,
    onEnter: () => videoElem.pause(),
    onEnterBack: () => videoElem.pause(),
    onLeave: () => videoElem.pause(),
    onLeaveBack: () => videoElem.pause(),
  });
  
});

See the Pen poRJVYw by Jase2018 (@Jase2018) on CodePen

Link to comment
Share on other sites

Hello @Jase

 

There are several issues in your demo.

 

1) As the docs state, the .scrollerProxy() you need for ScrollTrigger to work with locomotive-scroll was first introduced in GSAP 3.4.0 and you are using version 3.3.4 in your demo, so you'd have to update the version you are using in the first place.

 

2) You are delaying the initiation of your locomotive-scroll instance in a timeout-function which will likely make it be initiated after all the ScrollTigger-code (that is not in that a timeout function) has been parsed through already without having the neccessary locomotive-scroll instance as refence to work with what so ever. So either remove that timeout on your loco-scroll initiation or include all your other code in that timeout.

 

3) For ScrollTrigger to work with smooth-scrolling libraries, you have to define a scroller on your ScrollTriggers.

 

and ( maybe 4) All your ScrollTrigger is supposed to trigger is to pause the video - since it is not being played at all though, I am not sure what it is you are expecting to happen. If you only want it to be paused at certain points in scrolling once the user has already manually made it play than that of course is alright.

 

Here's your demo working, hope this helps:

 

See the Pen f60c419853c8f667bcac042e0ac6e61c by akapowl (@akapowl) on CodePen

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

thanks for the demo. there was an error saying ScollTrigger.scrollerProxy() was not a function. That is because you were using an old version. scrollerProxy() was added in 3.4.

 

you also omitted the scroller property when you created a ScrollTrigger for each video. 

 

in order for the video to play on scroll without any prior user interaction it needs a muted property. I added this for you.

 

See the Pen ExZjexm?editors=1010 by snorkltv (@snorkltv) on CodePen

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...