How to half split the screen UI

[Xenex122]

I know this is unrelated to gsap but I feel people a lot know of javascript here so I hope you guys can help. The following idea that I tried is this

As you can see in my title it means the screen is half split..I was almost close to it...But I can't achieve the "width" and the "left" maybe in this around of the field. 

This is the my own understand of it. It shouldn't collapse and it must only in the center of screen...as same the original of idea of codepen 

See the Pen gOvdaLm by myth-vince (@myth-vince) on CodePen

I know this is unrelated in gsap but since there is a lot of advance animator here and stackoverflow can't help me through this so I hope someone can get me through this.

See the Pen bWKMoK by tutsplus (@tutsplus) on CodePen

[SteveS]

Please refrain from making non-gsap related posts in the future:
 

See the Pen dydqYLv?editors=1111 by SteveSDaBest (@SteveSDaBest) on CodePen

[Xenex122]

uh @SteveS how can I do it if there is a body like this 
 

body {
  width:100%;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

CAuse I want to center it but it the animation clipper is just teleporting suddenly when I try to hover the image.

 

See the Pen eYVLJYm by myth-vince (@myth-vince) on CodePen

I also updated the javascript you do..instead of e.target.BoudingClientRect() I did something like this cause I want to avoid bugs 
 

overlap.addEventListener("mousemove", (e) => {
  var rect = overlap.getBoundingClientRect()
  gsap.set(clipper, {
    width: rect.width - (rect.width - e.clientX)
  })
})

But now the only problem is when I center it or relocate it in any position of my screen..It does have kinda have a bug.

When it is in the large screen it just teleported to right but if its small its seems normal.

 

Nevermind I already got my answer. Thanks buddy!!!

[SteveS]

It has to do with how it is getting the mouse position. It might be better to get the mouse position with respect to the entire viewport and then subtract it from the position of the container element.

[GreenSock]

Yep, you could actually leverage Observer to make it work on pointer and touch devices easily. Here's how I'd probably do it: 

See the Pen zYRJKZK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?