Jump to content
Search Community

"Draggable" lose scale initial value

ninmorfeo test
Moderator Tag

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

Hi, I created the dynamic dom element and I need to attach the draggable class to it.

 

When I call the Draggable.create (". Drag_item") function; I lose the initial scale values.

 

Specifically, the objects created set the css: transform: translate3d (0px, 0px, 0px) rotateX (20deg) scale (0.6) rotateZ (1deg);

 

while when I attack the "draggable" class the value becomes:

transform: matrix3d (0.598536, 0.0425114, 0.00892832, 0, -0.0419244, 0.607955, 0.132743, 0, -0.000536959, -0.210303, 0.962672, 0, 0, 0, 0, 1 );

 

losing the scale value.

 

This behavior will straighten me up and I wouldn't want to ...

 

how do I solve it?

Link to comment
Share on other sites

Hello @ninmorfeo and Welcome to the GreenSock Forum!

  • How are you setting your initial transform translate3d() ?
  • Are you setting it with GSAP using a set() or are you doing it some other way in the CSS outside of GSAP?

The reason being is you could be setting it outside of GSAP. But this will be hard to debug without seeing your code in context.

 

But to better help you please create a limited codepen demo example so we can see your code live and in an editable environment.

 

 

Happy Tweening :)

  • Like 3
Link to comment
Share on other sites

 

sorry, I looked better at the problem and it seems that this comes from the css of the container where I set the value of 'perspective'.
 

.drag_zone {

    width: 1100px;
    height: 800px;
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translate3d( -50%, 0px, 0px ) scale(1);
   -webkit-perspective: 600px;
    perspective:600px;
  z-index: 400;
}

but i think the real problem is that i use jquery.path.js to place my cards on a bezier curve.
 

Link to comment
Share on other sites

You should try setting the initial transform and perspective with GSAP. It will handle all the browser vendor prefixes if needed for each browser. And then will allow GSAP to record and keep track of your CSS transform changes.

 

TweenMax.set(".drag_zone", {scale:1, x: "-50%", perspective: "600px"});

// then your other GSAP code goes here

 

Also keep in mind that GSAP also has xPercent and yPercent instead of using x or y, for when you need to do a percentage based transform for translateX and translateY.

 

xPercent and yPercent,  percentage based transforms: https://greensock.com/gsap-1-13-1

 

See the Pen rAetx by GreenSock (@GreenSock) on CodePen

 

If your still having an issue please create a codepen demo example like I described above.

 

Happy Tweening :)

  • Like 3
Link to comment
Share on other sites

 

The problem is that I discovered gsap when I had already finished the project so I have to rewrite all the functions from the beginning, all because the interact.js library has problems doing the drag when using scaled containers. Let's have it updated when I rewrite the gsap based code if the problem occurs again. Only one last question and then we can close the post. Is there a method that sounds like onMove in the Draggable class? a method that allows me to check the object where it is in real time

Link to comment
Share on other sites

oh I found the solution .... I set the transformation property of dynamically created objects not through the jquery css method but via the gsap set and now works well with the external jquery.path library too.

 

TweenMax.set($("#" + chi), { scale: 0.6, rotationX:20});

  • Like 2
Link to comment
Share on other sites

That explains it.. ;)  That is why i asked above you if you were setting your initial CSS transforms outside of GSAP.

 

In your case using the jQuery css() method.

 

GSAP has no way of knowing when you set a transform outside of it, especially when using the jQuery css() method.

 

That is why it is always better to set your transforms with GSAP like i advised above,  so GSAP is kept in the loop of what your changing.

 

So you don't change CSS your trying to animate oustside of GSAP.

 

Happy Tweening :)

  • Like 4
Link to comment
Share on other sites

Your probably looking for the onDrag function:

 

https://greensock.com/docs/Utilities/Draggable

  • onDrag:  Function - 
    a function that should be called every time the mouse (or touch) moves during the drag. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onDragScope), making it easy to access the target element (this.target) or the boundary coordinates (this.maxX, this.minX, this.maxY, and this.minY). By default, the pointerEvent(last mouse or touch event related to the Draggable) will be passed as the only parameter to the callback so that you can, for example, access its pageX or pageY or target or currentTarget, etc.

 

Happy Tweening :)

  • Like 5
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...