Jump to content
GreenSock

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

How to create this mouse hover animation?

Go to solution Solved by akapowl,

Recommended Posts

How to create this mouse hover animation?

ref: https://oxymoron.studio/

Link to comment
Share on other sites

  • Solution

Welcome to the forums @ankitdetroja

 

The best way to find out how a certain animation works is to inspect the devtools.

When you do so, you can notice, that they are using a circle element for each of their images.

 

Unbenannt.thumb.png.313e02cc825a6ccb9d459a8796a2a3a1.png

 

 

 

These forums don't provide ready-to-go custom code solutions, but there is a neat demo in the docs for the .quickSetter(), showing how to start with a basic cursor follow. 

 

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

 

You could create a container for each image, which also has that circle inside of it, set overflow to hidden on that container, position the cirles absolute in there and set each of them up (maybe via top and left, depending on the parent-container's offsetLeft and offsetTop) so they initially would appear in the top left corner of the page and do the rest just like in that demo mentioned above.

 

For the effect of it 'highlighting' the image, I think they are just using some sort of trickery with the alpha of the .png images used. You could also try working with different blend-modes on the cursor although it would probably be less performant (although I can not say for sure if you would notice that). Maybe give it a shot. Hope that'll help a bit.

 

 

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