Jump to content
Search Community

How to half split the screen UI

Xenex122 test
Moderator Tag

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 {

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

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