Jase Posted March 24, 2021 Share Posted March 24, 2021 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 More sharing options...
akapowl Posted March 24, 2021 Share Posted March 24, 2021 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 4 1 Link to comment Share on other sites More sharing options...
Carl Posted March 24, 2021 Share Posted March 24, 2021 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 4 1 Link to comment Share on other sites More sharing options...
Carl Posted March 24, 2021 Share Posted March 24, 2021 oops. nice job @akapowl 1 Link to comment Share on other sites More sharing options...
akapowl Posted March 24, 2021 Share Posted March 24, 2021 Ha, for the first time I was faster than somebody (didn't see you typing there @Carl) 1 Link to comment Share on other sites More sharing options...
Jase Posted March 24, 2021 Author Share Posted March 24, 2021 Brilliant!! Thanks so much to you both for helping me out with this 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now