Jump to content
GreenSock

paprika

draggable .update() not working

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'm experiencing a problem with draggable. Maybe someone can help me...

 

I'm using draggable with the throwPropsPlugin to move a DIV and I have my own Javascript to scale and center it on mousewheel and pinch events. Unfortunately draggable doesn't use the new translate3d values, if I drag the div after that, because the internal x and y values were not updated. I found that .update() schould do this, but the .x and .y values of my draggeable object are the same before and after I execute .update() even though the translate3d values of my DOM object have changed. What am I doing wrong?

 

My code is:

Draggable.create(

  "#image",

  {type:"x,y",

    edgeResistance:0.8,

    bounds:"#frame",

    throwProps:true,

    onDragStart:function(){

      console.log("dragstart");

      clearTimeout(mousewheelTimer);

    }

  }

);

 

and later called after a short timeout, when the mousewheel is no longer scrolling:

 

function mousewheelEnd(){
    console.log(Draggable.get("#image").x );
    Draggable.get("#image").update();
    setTimeout(function(){console.log(Draggable.get("#image").x );},1000);
}

 

I also tried to kill the Draggable object and create a new one and to disable it while the mouse is scrolling. Nothing worked.

 

Please help! Thanks.

Link to comment
Share on other sites

pls use .set() method instead of jquery .css() , like this :

TweenLite.set("#image",{x:newX,y:newY,width:imageWidth,height:imageWidth*imageAspect})

btw , i don't check other parts of your code .

  • Like 5
Link to comment
Share on other sites

Don't mess with transforms directly. You can access the values like this...

// DOM element
var x = myElement._gsTransform.x;
var y = myElement._gsTransform.y;

// jQuery object
var x = $myElement[0]._gsTransform.x;
var y = $myElement[0]._gsTransform.y;

And like Diaco mentioned, always use GSAP to set any type of transform values 

// Good
TweenLite.set(myElement, {
 x: 200,
 rotation: 90,
 scale: 1.5,
 skewY: 45
});

I tried messing with your code, but you have way too much stuff to clean up. It's a start, but I don't know what's going on.

See the Pen 22ef8f862524c87960734ad8b90b4c77 by osublake (@osublake) on CodePen

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