Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
inkweon7269

Scrub through video smoothly - ScrollTrigger

Recommended Posts

Whenever you scroll I am making a function to play the video. 

The video is playing rough, how can I play it smoothly?

I think I should use "scrollerProxy", but I don't know how to apply it.

See the Pen poymmNo by inkweon7269 (@inkweon7269) on CodePen

Link to comment
Share on other sites

Hey inkweon7269 and welcome to the GreenSock forums.

 

How you encode the video has huge implications on the playback ability of video. This demo provides some info about how you should encode your video.

 

You might also see these threads for more info about this subject:

 

  • Like 2
Link to comment
Share on other sites

  • ZachSaucier changed the title to Scrub through video smoothly - ScrollTrigger
  • 4 months later...

Hey @ZachSaucier

 

I've been trying to get my video to play on scroll and stumbled upon this thread. I've implemented the code shown in your demo link and IT WORKS!! spent days on this. However, it is choppy. I was wondering if you could elaborate a little on the video encoding. I don't really understand the commented out section in the JS

 

Many thanks

Link to comment
Share on other sites

  • 3 months later...

Hi, guys,

I am currently building a video scroll component that scrubs a video based on the user`s scroll position. On desktops and higher-end mobile devices like Apple devices and newer Androids the video scrubs smoothly. I was following the encoding suggestions of this

See the Pen 9e810322d70c306de2d18237d0cb2d78?editors=0010 by shshaw (@shshaw) on CodePen

.

However, the problems start on some middle/lower-end Android devices, where lag can be observed still, regardless of the video encoding (or at least that is what I think). I am starting to think that it is impossible to fix due to hardware limitations.

So, my question is, has anyone managed to find a consistent working solution for both desktops and mobile devices?

Link to comment
Share on other sites

Hi Antonio,

 

This sound like more of a hardware performance issue which is a little out of scope for these forums.

That being said - If anyone has any tips they're welcome to jump in. I'm just not certain how much help we can be seeing as the issue isn't GSAP-specific.

  • Like 1
Link to comment
Share on other sites

I'd recommend trying various codecs and keyframe intervals. Some chips/GPUs have hardware decoding built-in for certain codecs so they can be super fast. But maybe you're testing on devices that don't have such optimizations. like Cassie said, totally unrelated to GSAP. 

 

If you use a codec that isn't SUPER-compressed and you have a lot of keyframes then it'll be much easier on the device to decode and jump around, but your video file size will obviously shoot way up. 

 

Good luck!

  • Like 1
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.

×