Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
maxvia

Divide div in half and have cursor flip when cursor crosses div

Recommended Posts

Hi, 

 

I would like to create a similar effect as the one here: https://cultivatingthevanguard.com/ (1st carousel) where you have the cursor flipping to the left when crossing to the left if the cursor is on the left part of the image and right when on the right part of the image. 

 

I have can have access to my div coordinates using the getBoundingClientRec() fonction, using calculation and mouseposition I could figure out if im on the left side or right side of the image however I am not sure how I could initiate a flip when crossing the div? 

 

Any help is appreciated. 

 

Thank you!

Link to post
Share on other sites

Hey @maxvia - welcome to the forums.

 

From what I can tell, when inspecting things through dev-tools, they are simply just using 'invisible' divs with mouseenter functions attached for this.

 

Something like this. You'd have to apply the rotation-tween to your custom cursor instead of what I did there, of course.

 

See the Pen abZaeEZ by akapowl (@akapowl) on CodePen

 

 

If you need information on how to setup a custom cursor in the first place, there are several threads on that in the forums already.

 

I'll link you to this one, might be helpful.

 

 

 

Hope this helps.

Cheers.

 

 

 

 

  • Like 4
Link to post
Share on other sites

Hey @akapowl, thank you very much for your detailed answer and examples.

 

Works like a charm

 

Cheers! 

 

  • Like 1
Link to post
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.

×