Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tom von Mom

controlling video with page scroll

Recommended Posts

Hello, fellow GSAPpers!

This is my first stab at GSAP (love it!) and I'm super-eager to get your input on whether I grasped some of the basics or just totally messed it up.

 

What I wished to create was some scrolling magic where the user controls the position of a video using the scroll wheel . Very similar to  what goes on at the top of apple.com/homepod (which also seem to use GSAPs Tween & Timeline. 

 

Please have a look and give any hints on how to make this even smoother and more compatible on all sorts of devices (iPhone seems to work pretty good though).

 

One thing that bugs me is that this is 40 lines of code. Apple's example runs one for  at least 400.  What am I doing wrong?

 

TOM

 

 

 

 

See the Pen JOyYaX by tomvonmom (@tomvonmom) on CodePen

Link to comment
Share on other sites

Sorry, I haven't had much experience with controlling video via scroll. It isn't a feature of GSAP.

Link to comment
Share on other sites

I don't think this is a good idea. Most videos play at like 24fps, and can't interpolate frames, so tweening the time might cause issues.

 

TweenLite.to("#video", 0.7, {
  currentTime: ((video_obj[0].duration - 10) * scroll_perc)
})

 

 

On 11/14/2017 at 5:15 PM, Tom von Mom said:

One thing that bugs me is that this is 40 lines of code. Apple's example runs one for  at least 400.  What am I doing wrong?

 

There are scrolling libraries available, or you can build your own. Here's a good example.

 

See the Pen RjKdLe by osublake (@osublake) 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.
×