Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
annam

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

Hello,

 

we have an issue with draggable - we need to manually change the draggable item's position, but even after calling the 'update' function to update the position as stored in the GS draggable object, that position is not updated. Due to this, when then starting to drag, the draggable item snaps back to its previous position, as if the manual update never happened.

 

Check out this jsfiddle that replicates this: http://jsfiddle.net/annam/3ek4nom7/

 

Click on the slider bar to move the slider button, and then try to drag. The button will snap back to 0.

 

We've tried to use both 'transform: translate3d()' and 'left' to manually change the position. Neither works, even after Draggable.update().

 

are we misusing Draggable and the 'update' function or is the update function not working as expected?

 

Thanks!

Anna

See the Pen by annam (@annam) on CodePen

Link to comment
Share on other sites

Hi annam  :)

 

try this :

TweenLite.set('#slider-button',{xPercent:"-50%"});
var draggable = Draggable.create('#slider-button', {
    type: 'x',
    bounds: {minX:0,maxX:300}
});
$('#slider-bar').click(function(e){
    var x = e.pageX - $(this).offset().left;
    TweenLite.set($('#slider-button'),{x:x});
    draggable[0].update();
})

pls check this out : http://jsfiddle.net/kmhLrgej/

  • Like 2
Link to comment
Share on other sites

Yep, the problem was simply that you were trying to manually change things via CSS, but for optimized performance, GSAP caches transform-related values internally (actually, on the element itself, inside a _gsTransform object), so it's always best to set them directly through GSAP, like TweenLite.set(element, {x:100, y:200}). You can, of course, tell GSAP to re-parse the CSS if you really need to (by setting parseTransform:true on a tween), but I'd strongly discourage that because there's a performance penalty (it has to ask the browser for the current value, grab the matrix() or matrix3d() and do the math to figure out what all the values translate to in terms of rotation, scale, position, skew, etc.) 

  • Like 4
Link to comment
Share on other sites

Hi guys,

 

thank you once again for the super quick reply! I'll add the suggested changes and get back to you to confirm that this has been fixed.

 

so just to confirm, update() would work if you've updated through GSAP, but not through any other method? eg css style, or class change etc?

 

Thanks!

Anna

Link to comment
Share on other sites

Hi annam  :)

 

as Jack said :  " You can, of course, tell GSAP to re-parse the CSS if you really need to (by setting parseTransform:true on a tween), but I'd strongly discourage that because there's a performance penalty (it has to ask the browser for the current value, grab the matrix() or matrix3d() and do the math to figure out what all the values translate to in terms of rotation, scale, position, skew, etc.) "

 

something like this :

var draggable = Draggable.create('#slider-button', {
    type: 'x',
    bounds: {minX:0,maxX:300}
});
$('#slider-bar').click(function(e){
    var x = e.pageX - $(this).offset().left;
    $('#slider-button').css({transform: 'translate3d(' + x + 'px, 0, 0)'})
    // with "parseTransform:true" tell GSAP to re-parse the CSS , before the .update() ;
    TweenLite.set('#slider-button',{parseTransform:true,xPercent:"-50%"});
    draggable[0].update();
})

but it's always best to set them directly through GSAP , like TweenLite.set(element, {x:100, y:200}).

Link to comment
Share on other sites

Hi Diaco,

 

let me rephrase my question, when should we use "update"? from your code, it seems it works only for updating values changed through greensock? why? if you are calling "update", shouldn't it also refresh cached transform-related values? as a user reading the docs, that's what I understood "update" to do.

 

thanks!

Anna

Link to comment
Share on other sites

Hi,

 

As Jack mentioned this has to do with how GSAP works under the hood:

 

Yep, the problem was simply that you were trying to manually change things via CSS, but for optimized performance, GSAP caches transform-related values internally (actually, on the element itself, inside a _gsTransform object), so it's always best to set them directly through GSAP, like TweenLite.set(element, {x:100, y:200}).

 

Like this GSAP handles all transforms. I saw the same issue once. I was using transform(translate()) in my stylesheet, then I changed the element's position using GSAP and when I changed the device orientation or the screen size things went out of place (so to speak), so since then my rule of thumb is that if an element is animated using transform values, I set the initial position using GSAP, if the element is not going to be animated I just use the stylesheet.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Hi Rodrigo, sorry to persist on this,

 

I'm just saying that, since the definition of "update()" is as follows:

 

 

 

Updates the Draggable's x and y properties so that they reflect the target element's current position. This can be useful if, for example, you manually change or tween the element's position, but then you want to make sure the Draggable's x and y reflect those changes

 

Then, if you specifically call "update", then the css position changes should also be taken into account. From a user's point of view, when this didn't work for me and without knowing the internal workings of GSAP, I considered it a greensock bug. 

 

Anyway, we'll be implementing the changes as suggested! :)

 

Thanks again!

Anna

 

 

  • Like 1
Link to comment
Share on other sites

Hi Anna, 

 

Your persistence is appreciated. We don't want users hitting roadblocks in the docs. We'll take a stab at clarifying the update() definition and noting that its best to modify a Draggable's css via set().

 

Thanks!

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