Is it possible to resize div from right to left

[gargara1]

I have an absolute div that I am using as Draggable and also I need to add it resize-x functionallity. So the resize from bottob right was pretty easy, I just set up a handle which was draggable by its own and just change the width of the element:

const rightHandles = document.getElementsByClassName('drag-handle-right');
rightHandles.forEach((e)=>{
  const targetDiv = this.$refs[e.dataset.parent];
  Draggable.create(e, {
    type: "x",
    onDrag: (event) => {
      const {clientX} = event;
      const {left} = targetDiv.getBoundingClientRect();
      const width = clientX - left;
      targetDiv.style.width = width + 'px';
      this.objectsWidth = width;
    }
  })
})

Unfortunately the bottom left handle is a nightmare. The major problem is that the div is very hard to make appear growing from right to left, I need to add style.left property simultaniously with style.width and it becomes a big mess.

I know this is not exactly gsap related question, but more of a javascript etc. question, please do not stackoveflow me. If someone can give me a hint that would be great. If there are other solutions with differen approach I will be happy to let me know.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.