Jump to content
GreenSock

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

How to improve a jerking transition affected by video playback

Recommended Posts

GSAP, when applied correctly is super-smooth without question-- who want's to argue with that? The problem is, when it's stacked on the same page with a heavy workload like video playback, it struggles a bit. I notice this when I ran my infinite horizontal news ticker-- not a fault of GSAP but the end-user wouldn't know that since it's the news ticker jerking motion that is noticeable.

My question is, it's there a strategy to further optimize for smooth transition? If their is, I may have to apply this solution to my videojs player as well-- I wish Greensock would release it's own kick-ass video player. I'm thinking of using Web Worker but given that GSAP is mainly a DOM workhorse, I wonder if it's feasible. Any thought on this?

 

Link to post
Share on other sites

Hey uzisky. 

 

There's very little chance that the performance slowdown is due to GSAP. Most likely any slowdown happens because either

  1. You're not animating things in the most performant way possible or
  2. What you're trying to animate just isn't performant to animate in a browser regardless of what you use.

Without seeing your code it's impossible for us to say which of the two it is :) 

 

1 hour ago, uzisky said:

it's there a strategy to further optimize for smooth transition?

How can we know that without seeing the code ourselves?

 

1 hour ago, uzisky said:

I wish Greensock would release it's own kick-ass video player. I'm thinking of using Web Worker but given that GSAP is mainly a DOM workhorse, I wonder if it's feasible. Any thought on this?

We have no intention of doing anything similar to that as the functionality of GSAP is quite different than a video player. And GSAP does a great job of manipulating the playback state of videos if setup properly.

 

As for using a web worker, that likely won't help unless you're doing a lot of computations (which is unlikely if you're just manipulating a video).

  • Like 1
Link to post
Share on other sites
50 minutes ago, ZachSaucier said:

Without seeing your code it's impossible for us to say which of the two it is :) 

That should be standard procedure-- apologies.

See the Pen RwrmxXa by enuzo (@enuzo) on CodePen

 

Link to post
Share on other sites

I recommend using xPercent instead of getting the width yourself: xPercent: -100

 

The only performance recommendation I would make in regards to that pen is potentially applying will-change: transform to .news_topics.  But the animation should play smoothly. Most likely any performance hits you're seeing are due to something else on your page.

Link to post
Share on other sites
5 minutes ago, ZachSaucier said:

I recommend using xPercent instead of getting the width yourself: xPercent: -100

 

The only performance recommendation I would make in regards to that pen is potentially applying will-change: transform to .news_topics.  But the animation should play smoothly. Most likely any performance hits you're seeing are due to something else on your page.

Sure. The performance hit is caused by the video playback, not GSAP. Thanks for the recommendation.

Link to post
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.

×