mmmmmmmmm Posted December 5, 2022 Share Posted December 5, 2022 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 Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 5, 2022 Share Posted December 5, 2022 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. Link to comment Share on other sites More sharing options...
mmmmmmmmm Posted December 6, 2022 Author Share Posted December 6, 2022 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted December 6, 2022 Share Posted December 6, 2022 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! Link to comment Share on other sites More sharing options...
mmmmmmmmm Posted December 11, 2022 Author Share Posted December 11, 2022 Thank you, got this working. By chance how would I go about making this work on mobile. Tried a few things. Link to comment Share on other sites More sharing options...
mmmmmmmmm Posted December 11, 2022 Author Share Posted December 11, 2022 https://sagonabrand.com/ Curious if you have any insight on getting this to work on Mobile by chance? Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 11, 2022 Share Posted December 11, 2022 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? Link to comment Share on other sites More sharing options...
mmmmmmmmm Posted December 12, 2022 Author Share Posted December 12, 2022 Oh yeah forgot, yeah it is the same proto not working on mobile Link to comment Share on other sites More sharing options...
mmmmmmmmm Posted December 12, 2022 Author Share Posted December 12, 2022 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 Link to comment Share on other sites More sharing options...
GSAP Helper Posted December 12, 2022 Share Posted December 12, 2022 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. 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