Jump to content
Search Community

Draggable move the element with translate3d

cemycc 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



I move the element that have the dragged event on it with translate3d and I give the coords that I want.

After, I click on it to move it again he will go back to the position where he was when drag have stoped.

He don't start from the new position where I have moved it.

This means that the draggable plugin saves the positions somewhere and he ignore the position from css, how can I change it ?


Link to comment
Share on other sites

Ah yes, GSAP does record the values in a "_gsTransform" object on the element for several reasons:

  1. It boosts performance
  2. It works around some browser bugs. For example, Chrome doesn't report getComputedStyle() correctly after you've applied a transform to an SVG element. Let's say you add a scale() transform to double its size and then you check the computed style - Chrome will report that its scale is normal (1)! So GSAP keeps track of the values itself in order to avoid strange issues like that.
  3. It's very convenient for storing the true numeric data. Originally it was only intended for GSAP's internal use, but a lot of developers have wanted to be able to grab the current rotation or scale or skew or x/y position directly as numbers instead of having to parse the css string (especially if it's a matrix), so this object provides a really useful lookup table. 

The down side, of course is that if you manually change css values AFTER you've done some tweening with GSAP and then you try tweening the same element again, it'll be using those values it recorded. There are a few solutions:

  1. Don't change the css yourself - instead, use a TweenLite.set() call, like TweenLite.set(element, {x:100, y:200}). That ensures things stay in sync. This would be my top recommendation.
  2. If you need to edit the css, you can force GSAP to "forget" its recorded values and reparse from the css next time - just delete the element's _gsTransform property (make sure you're not in the middle of tweening that element, though). 
  3. You can set parseTransform:true in any tween in order to force it to re-parse the css values. So you could add that to a subsequent tween after you've made your css edits. 

Does that help?

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