Jump to content
GreenSock

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

._gsTransform returns 0

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

Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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

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

×