How to improve a jerking transition affected by video playback

[uzisky]

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?

 

[ZachSaucier]

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).

[uzisky]

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

 

[ZachSaucier]

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.

[uzisky]

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.