ScrollTrigger - How to slow down scrubbing while scrolling. (smoothscroll?)

[mmmmmmmmm]

I would love to get the video to scrub smoother and slower, but I can't seem to get it to work. I also seem to have issues utilizing Smoothscroll.

I am not sure if it is the video export. I have noticed Safari is by far a lot smoother, but still scrubs through the video ultra fast. Any help would be much appreciated a bit of a newb.

 

https://sagona-brand.myshopify.com/

See the Pen by (@) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[mmmmmmmmm]

Here is the codepen. I think it is also the video codec exporting for a smoother scrolling experience, but any help would be amazing. Slow Motion is essentially what I want to happen and as it goes through the skate. This is also a dummy video there will be one more appropriate for it.

 

See the Pen NWzeLML by michaelmartinho (@michaelmartinho) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums!

 

There are a few things that you should keep in mind when using ScrollTrigger to scrub videos. One is to have no easing function on the tween that scrubs the video position and the other is the amount of scrolling you need. Right now you don't have a start or end trigger in your ScrollTrigger configuration, so GSAP asumes the default ones which is when the top of the trigger element hits the top of the viewport and the bottom of the trigger container hits the top of the viewport. So you need to give ScrollTrigger more space to scrub the video. This seems to work better:

let tl = gsap.timeline({
  defaults: { duration: 1, ease: "none" },
  scrollTrigger: {
    start: "top top",
    end: '+=8000',
    trigger: "#pinnedVideo",
    scrub: -2,
    markers: true,
    pin: '.videoBox'
  }
});

This video explains the best approach to work with ScrollTrigger:

 

Finally when using ScrollTrigger to scrub a video is always a good idea to set up the video properly. Take a look at this threads in order to get a better idea on how to do that:

 

Let us know if you have more questions.

 

Happy Tweening!

[mmmmmmmmm]

Thank you, got this working.

 

By chance how would I go about making this work on mobile. Tried a few things.

[mmmmmmmmm]

https://sagonabrand.com/ Curious if you have any insight on getting this to work on Mobile by chance? 

[GSAP Helper]

We can't really troubleshoot live sites like that (at least not for free - it's a lot more time-intensive and fraught with challenges). Are you saying your minimal demo doesn't work on mobile? 

[mmmmmmmmm]

Oh yeah forgot, yeah it is the same proto not working on mobile

 

[mmmmmmmmm]

2 hours ago, GSAP Helper said:

We can't really troubleshoot live sites like that (at least not for free - it's a lot more time-intensive and fraught with challenges). Are you saying your minimal demo doesn't work on mobile? 

Ys yes

[GSAP Helper]

That's unrelated to GSAP - it looks to me like an issue with loading video on mobile and setting the currentTime. You can eliminate GSAP from the equation and just try to set the video.currentTime and you'll see that it doesn't work in your setup but I don't have time to research all the nuances of video on mobile devices and how you can work around that, but my advice would be to just try to focus on getting the video to load and successfully jump to a frame using video.currentFrame. Once you do that, then setting it with GSAP should be no problem.