Animating Scale on a Draggable is slow and choppy

[BowserKingKoopa]

I have a container and inside the container I have my "game".  I drag the game view around using Draggable.

 

I tried to implement a zoom feature and found that when I animate the Scale of the Draggable it is very slow and choppy, as demonstrated in my codepen.  The same zoom feature implemented with CSS Transitions is smooth as silk (but I can't use that in my actual game because it interferes with Draggable. They fight over the transform).

 

Can you help me figure out why this animation is so slow and if there's a better way to do this?  Thanks.

 

-Ryan

 

Edit: The problem is most apparent in Chrome.

See the Pen oxeZEV by anon (@anon) on CodePen

[Carl]

Thanks for the demo. From what I can tell the performance has nothing to do with Draggable or GSAP.

The problem is rendering performance of the browser and the fact that you are trying to resize an image with 10 million pixels at 60fps.

Dropping in a smaller image shows significant improvement: http://codepen.io/GreenSock/pen/pyrwdv?editors=0010

 

For high-performance rendering you may want to consider switching to WebGL / canvas with a library like Pixi: http://www.pixijs.com/

GSAP doesn't care where you render (DOM or canvas), it can animate any numeric property you throw at it.

 

Check this out:

http://lederniergaulois.nouvelles-ecritures.francetv.fr/#!/episode1 (massive animated image as you scroll, uses GSAP)

 

 

Games like this can run super smooth too! http://play.disney.com/html5/dsc_spl_act_isleofthelostrush/?refOverride=http%3A%2F%2Fgames.disney.com.au%2Fdescendants-isle-of-the-lost-rush&coreGameId=514df10fee77c10de34b9f82

[BowserKingKoopa]

Except if I do the same transform using CSS transitions it's silky smooth. So it's not beyond the capability of the browser by any stretch. It has to do with the way Draggable is doing the animation.

 

The demo you made with the smaller image is still pretty choppy. I still think something weird is going on in Draggable.

[Carl]

Curious what browser and version you are using.

Your original demo looks pretty good on FireFox and Safari

 

It seems to be Chrome 49 that is clearly struggling on my end and its most likely related to this bug

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/?hl=jank#entry58884

which is actively being pursued by the Chromium team

 

https://bugs.chromium.org/p/chromium/issues/detail?id=573146&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified&start=100

 

 

 

 

Try using an <img> instead of a background-image.

Seems MUCH better

 

http://codepen.io/GreenSock/pen/ONjvJZ

[PointC]

I took a look at this too. The original pen is smooth for me in IE11, Edge, & Firefox, but choppy in Chrome.

 

Carl's fork with an image instead of a background-image is perfectly smooth for me in all browsers.

 

[BowserKingKoopa]

So it's definitely a Chrome thing. Other browsers look good for me as well.  Using an img tag instead of a background image is a bit of a pain in the actual game but still it's something I might be able to get working.  Thanks so much for your help.

[Jonathan]

I wonder if that Chrome scale choppiness is due to that new / old Chrome 49 bug? The Chrome dev team is looking into that right now!

 

https://bugs.chromium.org/p/chromium/issues/detail?id=596382&can=2&start=0&num=100&q=chrome%2049&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=

 

[Carl]

Very clear that the larger the image, the more pronounced Chrome's performance struggles are.

 

I just updated the bug report with a new video

 

https://youtu.be/8w12f0CYyEY

 

demos: 

<img> looks great: http://codepen.io/GreenSock/pen/JXyLXb

background-image bad: http://codepen.io/GreenSock/pen/BKdrLq/

 

@BrowserKingKoopa, thanks for understanding. Hopefully the Chrome team will get this sorted. It pains us greatly to see browsers introduce these issues that impact our products and users. Chrome has been super speedy and my browser of choice for years. I'm hopeful the next version will be better. The Chromium team has some smart cookies.