Jelena Posted December 3, 2020 Share Posted December 3, 2020 Video disappears on scroll only safari. https://website-staging.oq.com/en/expanding-polymer-horizons/ Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 3, 2020 Share Posted December 3, 2020 Hey Jelena and welcome to the GreenSock forums. It's very hard for us to debug an entire website. Can you please create a minimal demo of the issue? Link to comment Share on other sites More sharing options...
Jelena Posted December 3, 2020 Author Share Posted December 3, 2020 Hi, Thanks for having me. Whether this helps or should be placed on the codepen? It works just fine on all browsers only safari issues. The video disappears at the end of the animation. Recording #6.mp4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 3, 2020 Share Posted December 3, 2020 Yes, please make a minimal demo using something like CodePen Link to comment Share on other sites More sharing options...
Jelena Posted December 3, 2020 Author Share Posted December 3, 2020 Uh, i hope it will help JS part, it's a little harder to put it all in Codepen with video and rest style. See the Pen MWjKejg by jecika404 (@jecika404) on CodePen Thanks Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 3, 2020 Share Posted December 3, 2020 I understand that it's difficult to create a minimal demo, but that's what needs to happen if you'd like our help. Unfortunately we don't have the capacity to debug your project for free which is why you need to create a minimal demo of your situation for us to take a look If you create a good, minimal demo there's a high chance that you'll be able to figure out the issue yourself! Link to comment Share on other sites More sharing options...
Jelena Posted December 3, 2020 Author Share Posted December 3, 2020 Yes, it is very difficult to detect a bug like that with only a bit information. This probably help. See my codepen. See the Pen MWjKejg by jecika404 (@jecika404) on CodePen Video only disappears on safari. Thanks Link to comment Share on other sites More sharing options...
GreenSock Posted December 3, 2020 Share Posted December 3, 2020 Thanks for putting together a CodePen. This looks like it has nothing to do with GSAP/ScrollTrigger: Safari is reporting the video.duration as 37.24333333333333. Try setting video.currentTime to that directly and you'll see it go black. There's your problem. Maybe round down to the nearest 10th of a second? Chrome isn't even firing off that "loadedmetadata" event, thus it's never even setting up the video scrubber because you're doing that in your event handler. Does that clear things up? 1 Link to comment Share on other sites More sharing options...
Jelena Posted December 4, 2020 Author Share Posted December 4, 2020 Hmm, yes. Weird. Thanks for the explanation. One more question. Whether it supports EDGE browser doesn't look very good and also doesn't smooth on mobile phones? Does that have anything to do with the plugin? Link to comment Share on other sites More sharing options...
meindert Posted December 4, 2020 Share Posted December 4, 2020 I have tried an animation like this before and I never had a smooth result (didn't use ScrollTrigger yet back then) but I believe that an image-sequence will be much smoother than manipulating the video timeline, and the browser support will probably be much better Apple does it with an image sequence as well. I found two demos on the forum: See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6?editors=0010 by osublake (@osublake) on CodePen See the Pen mdVEpKK by GreenSock (@GreenSock) on CodePen 3 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