._gsTransform returns 0

[Wurielle]

Hello everyone, I was in the process of recreating an effect I made with draggable but this time using TweenLite and while I managed to correctly get the x and y position of my draggable onDrag, I couldn't get these position onUpdate in my tweenlite.

 

Actually I do get a result but it always returns 0 for some reasons. I have actually searched for 4 hours and tried A LOT of solution that were presented on the forums as well as some solutions on stackoverflow and none worked. This was the closest I could get: http://jsfiddle.net/Wurielle/tn9t84d4/14/

 

The image on the bottom is a draggable element that works just fine by inverting the x position of the content from the x position from the container.

I would like to have the same effect with tweenlite but whatever I do I can't seem to get the correct positions.

TweenLite.to(slide, 1, {x: "0%", onUpdate: update, onUpdateParams: ["{self}", slideContent], ease: Power4.easeOut});
...

function update(el, target){ 
  var x = el.target[0]._gsTransform.x;
  var y = el.target[0]._gsTransform.y;
  TweenLite.set(target, {x: -x+"%", y: -y});
  console.log(x, y);
}

 

Am I doing something wrong? I really can't figure it out..

[OSUblake]

You're adding a percent to it which is handled differently. You will see the value if you check the xPercent property.

element._gsTransform.xPercent // => 100 

 

Check out this post for an introduction to to percentage based translation.

https://greensock.com/gsap-1-13-1

[Wurielle]

Wow thank you it actually worked! I didn't know that was a thing. I'm gonna start to use it more often, thanks!