Jump to content
Search Community

TweenMax & Draggable - how update (correct) after scale

chriswyl 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

Hello,

 

I've some little problem.

I wrote the code

 

See the Pen DFEkx by amonk (@amonk) on CodePen

 

How can I update  draggable box position after scale?. Maybe it is possible to update when render?

 

Try this steps:

 

1. press button (+) about 5 times;

2.drag square at (0,0) position;

3 press button (-)

 

I don't want white space, 

 

Link to comment
Share on other sites

I am a little confused on what you mean by you don't want white space?

 

Have you looked into the Draggable Docs?

 

You can try onDragEnd .. then do something inside that function after dragging has ended.

 

Here is your codepen modified with onDragEnd:

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

 

You will notice that after dragging you will see a message under your plus and minus buttons displaying onDragEnd in white text.

 

Im not exactly sure what you wanted to do after dragEnd.. were you trying to make the draggable blue square resize itself after dragEnd,  to be the same size as your white square?

 

Taken from Draggable Docs:

  • onDragEnd : Function - a function that should be called as soon as the mouse (or touch) is released after the drag. Even if nothing is moved, the onDragEnd will always fire, whereas the onClick callback only fires if the mouse/touch moves less than 3 pixels. Inside that function, "this" refers to the Draggable instance (unless you specifically set the scope using onDragEndScope), 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.

Thanks again for any additional info. :)

Link to comment
Share on other sites

Hi,
 
Perhaps this code might help, give it a try and let us know how it goes:

function zom(delta)
  {
    
   SCALE += delta*STEP; 
    if(SCALE<1)SCALE=1;
    TweenMax.to("#box2", 0.5 ,
    {
      scaleX:SCALE,scaleY:SCALE,
      onComplete:function()
      {
        Draggable.get("#box2").applyBounds();
      }
    });
  }

Basically the code retrieves the Draggable instance related to the blue box and then forces the bounds to it when the scaling is complete. You can check it here:
 
http://api.greensock.com/js/com/greensock/utils/Draggable.html#applyBounds()
 
Another option would be to use it in an onUpdate callback instead of onComplete, like that as the box scales down the element is repositioned:

function zom(delta)
  {
    
   SCALE += delta*STEP; 
    if(SCALE<1)SCALE=1;
    TweenMax.to("#box2", 0.5 ,
    {
      scaleX:SCALE,scaleY:SCALE,
      onUpdate:function()
      {
        Draggable.get("#box2").applyBounds();
      }
    });
  }

In the latter it could be a bit of trade off in terms of performance, specially considering other elements in the document and document rendering. Perhaps you can ty both and see which one behaves better.
 
Rodrigo.

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