Jump to content
GreenSock

Dean Mann

Draggable and Scale

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

I am using draggable on a div containing svg elements

 

If I dont use draggable and scale the div via:-

var i = $('#chart');
TweenLite.to(i, 2, {scale:4});
 
The edges of the SVG text and circle etc remain crisp as you would expect from scaled vectors.
 
However if I enable draggable via:-
var aD = Draggable.create("#chart", {type:"x,y", edgeResistance:0.5, throwProps:true, bounds:window});
 
and then zoom the SVG element become fuzzy as though they were scaled pixels.
 
This happens even if I disable draggable before scaling
 
Any ideas why this might be?
Thanks - Dean 
 
Update: Scale without Draggable uses -webkit-transform: matrix(...
Scale with Draggable uses -webkit-transform: matrix3d(...
 
using Safari and Chrome on Mac - not a problem on Firefox (not using webkit)
 
Ah: Putting force3D:false as in:
TweenLite.to(i, 2, {scaleX:4, scaleY:4, scaleZ:1, force3D:false});
 
Is their a reason for the problem with matrix3d and scale on webkit?
solves the problem
Edited by Dean Mann
Link to comment
Share on other sites

By default, Draggable sets force3D:true because:

  1. Whenever an element has a 3D transform on it, the browser (at least most browsers) will create a distinct layer on the GPU for that element which makes compositing much faster thereafter. This can result in a pretty significant speed boost. 
  2. When an element has a 3D transform, the browser typically doesn't force pixel snapping, meaning it'll do sub-pixel rendering, making motion appear smoother. 

It sounds like in your case, the browser was creating a texture layer and just having the GPU scale that (meaning the pixels just got bigger when you scaled up). GSAP can't control that - it's a browser thing. One potential solution is to make the original element be larger, and scale its initial state down so that it's scrunching the pixels at the beginning, and then when you scale up, it's actually at normal scale, thus the "captured" state has more pixel data. 

 

You can tell Draggable not to force 3D if you want - just pass "force3D:false" in the config parameter. But again, the down side is that you may see a slight performance hit (which, again, is not caused by GSAP - it's a browser thing). 

 

Does that help?

  • Like 1
Link to comment
Share on other sites

Yes thank you, I am setting to force3D to false just now to permit scale without loss of detail.

 

I tried making original element larger and scaling down it works but causes a problem with the complex dynamic visualisation I am running on the div being scaled and dragged

 

I understand it is a browser issue

 

Thanks for your time

  • Like 1
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.
×