[How to improve a jerking transition affected by video playback]

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.

[How to improve a jerking transition affected by video playback]

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

 

[How to improve a jerking transition affected by video playback]

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?

 

[How to Create a superb vertical Marquee that pause at intervals.]

1 hour ago, mikel said:

Hey @uzisky,

 

Just another approach

Happy tweening ...

Mikel

Wow, thanks Mikel! Exactly want I want. I really need to dig into GSAP.

[How to Create a superb vertical Marquee that pause at intervals.]

I'm also trying out the yPercent in place of y: since it's the recommended way to do it. It doesn't solve the problem though.

[How to Create a superb vertical Marquee that pause at intervals.]

Hello @ZachSaucier, thanks for your response. The problem is how to have the items scroll vertically in a seamless loop and how to make each item pause for lets say 2 seconds, then scroll to the next item, then pause again ...on and on just like the first example on this page.

This is what the current code code looks like:

var tl = gsap.timeline();

tl.to(".item", {y: "-=50", duration: 2});

I tried this:

var tl = gsap.timeline();

tl.to(".item", {y: "-=50", duration: 2, repeat: -1, repeatDelay: 2});

and this without successes:

var tl = gsap.timeline({repeat: -1, repeatDelay: 2});

tl.to(".item", {y: "-=50", duration: 2});

[How to Create a superb vertical Marquee that pause at intervals.]

Hello, first timer and a newbie here.

I've been trying to create a vertical Marquee that scrolls vertically with pauses at interval that works exactly like this:

https://www.jqueryscript.net/demo/Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker/#

But I've been hitting a road block. Your help is appreciated.

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