Jump to content
Search Community

Tweening video frames

Andy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to use scrolling to control video, all is essentially good, but it can be a bit jerky.

 

I thought if i tween the playhead position rather than jumping to the current position it'd be much nicer. However it seems to wait until the tween is complete, then updates the displayed frame, making it much worse..

 

This is all happening within a much larger framework, so i'm just copying in the relevant snippet here;

 
self.addScrollListener = function()
{
        $(window).bind('scroll',self.updateTimelineByScrollPosition);
}
self.current_percent = 0; 
self.updateTimelineByScrollPosition = function() 
{ 
        var current = $(window).scrollTop(); 
        var max = $(document).height() - $(window).height(); 
        var pos = ( current / max ) * 100; 
        var seek_time = self.time * pos;
        TweenMax.to( self, 0.5, { current_percent: pos, onUpdate: self.tweenUpdatePlayhead }); 
} 

self.tweenUpdatePlayhead = function() 
{ 
        self.jplayer_div.jPlayer( "playHead", self.current_percent ); 
};
 

Note I'm using jPlayer for the video, but I have tried doing this by setting the currentTime directly on the <video> element.

 

Thanks,

Andy

  • Like 1
Link to comment
Share on other sites

Well, more keyframes definitely help. I've also lowered the bitrate which also helps (buffering kills the effect) .

Chrome refuses to do nice tweening, whether that's to do with scrolling i'm not sure...

IE11 Firefox Safari all do lovely tweens, so I've coded an exception for Chrome to bypass the tween and jump to the target percent.

 

I may put together a codepen to illustrate at some point, if I do I'll post here.

 

Andy

  • 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.
×
×
  • Create New...