Jump to content
GreenSock

Xenex122

How to half split the screen UI

Go to solution Solved by SteveS,

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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? 

  • Like 1
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.
×