Jump to content
Search Community

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

mstrhans test
Moderator Tag

Go to solution Solved by mstrhans,

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

Link to comment
Share on other sites

  • Solution

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

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

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