Jump to content
GreenSock

Jelena

Problem with Safari / disappearance of the video

Recommended Posts

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

 

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.  

 

Link to comment
Share on other sites

Yes, please make a minimal demo using something like CodePen :) 

Link to comment
Share on other sites

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

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

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

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? 

  • Like 1
Link to comment
Share on other sites

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

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

  • Like 3
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.
×