Jump to content
GreenSock

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

A first in GSAP, jerky, stuttering playback in GSAP?

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

This is a first for me since i have been using GreenSock for many years and it never failed me since.

I discovered its quite easy to even create banners using Adobe Animate CC 2017..

 

However now in that new workflow/method i noticed a asimple animation not running smooth but jerky or stuttering.

The animation should go smooth from left to right in an even manner... but it doesn't..., the customer noticed it ..In fact he made the remark i didn't see it at first while developing. Its like the animation "jumps" bridging larger gaps to reach the end of the animation.

 

I have a link here: http://dru.sterkburo.info/demo/demo1.php.

It does this in every browser (FF, Safari and Chrome) on mac. But most noticeable in Chrome.

 

Any one any ideas?;

1. I read some one having trouble in safari and using transform: translate3d(0,0,0); that ran smoother/faster. But that isn't it safari only?

2. I can raise the frame rate in Adobe Animate CC 2017 and this does make - while developing - animations run smoother but online they are jerky and stuttering again

 

Looking forward to any help or suggestions

 

Regards

See the Pen GNevGG by mstrhans (@mstrhans) on CodePen

Share this post


Link to post
Share on other sites

I'm moving this to the banner forum as it will probably get more attention from people who use AnimateCC.

 

I noticed you were using a mask somewhere, curious if the performance is better without it.

  • Like 1

Share this post


Link to post
Share on other sites

Hi Carl, thank you..

 

Indeed it sprung to mind with me as well, i can remove it and try but that shouldn't affect the little line of text above it. I noticed the JS file is quit large 132Kb, might that be too large? Im a bit clueless here..

Share this post


Link to post
Share on other sites

I don't see jerkiness in Win7 Chrome.

If You put Your banner on a site via an adserver, there will be more ads running at the same time, which will cause noticable jumps, and lagging in the animation.

The translate3D won't have any effect in case of <canvas> I think.

  • Like 1

Share this post


Link to post
Share on other sites

Hello Carl,

 

As always it wasn't an issue with GSAP at all,

 

Because you can paste between Adobe Illustrator CC  and Adobe Animate CC so easily. You are ..lets say too easy. When you paste a complex gradient (And you can create, really very very complex gradients in Adobe Illustrator) these get - during pasting into Adobe Animate - converted to SVG.

 

But as every old school postscript guy knows these files or SVG have thousands, maybe millions of control points. That was a little too much....It got even the ventilator spinning of my Macbook

 

Maybe that works in print, but for online in a banner ...i just ditched the gradients made it one solid color (No one will notice) and voila...every thing running smooth.

 

Regards Hans

  • Like 1

Share this post


Link to post
Share on other sites

 

Thank you but you have a probably a very fast PC so you won't even notice it any way ;-)

 

But try the banner i had on my wife her iPad 2. Oh boy..such slooow animations. Thank the lord we have GSAP because when i simplified the document it ran very smooth even on that old iPad.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for the report. Great to know you found a solution and that GSAP was doing its job properly :)

  • Like 1

Share this post


Link to post
Share on other sites

 

 

Thank you but you have a probably a very fast PC so you won't even notice it any way ;-)

 

But try the banner i had on my wife her iPad 2. Oh boy..such slooow animations. Thank the lord we have GSAP because when i simplified the document it ran very smooth even on that old iPad.

 

I really have to test my banners on iDevices and slower pcs. I just bought an NVidia 1060 or something, which seems like too good for HTML banner developement. A perpectly average gfx card would be ideal.

  • Like 1

Share this post


Link to post
Share on other sites

By the way: Did You try the gradient with bitmap caching turned on?

Share this post


Link to post
Share on other sites

Hello Oliver15,

 

it was a pasted vector graphic from Adobe Illustrator not from Photoshop. I didn't look into converting it to a bitmap (with caching) though a very good idea to try indeed.

 

In my case the gradient was scaled down to maybe 1mm (20x20 pixels max) the details of the gradient got lost anyway so i changed to a solid color.

But just to learn im going to try that..ill let you know about the performance...

Share this post


Link to post
Share on other sites

The one thing (from bunch of others) I hate in Animate CC the most (before I discover great GSAP) is wrong color in every shape with copy-paste from Illustrator to Animate on MacOS. I reported that as a bug on Animate forum but no result (now I don't care :) about that).

 

Even not talking about text output/rendering.

Share this post


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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×