How to create this mouse hover animation?

[ankitdetroja]

How to create this mouse hover animation?

ref: https://oxymoron.studio/

[ankitdetroja]

4 minutes ago, ankitdetroja said:

https://oxymoron.studio/

 

[akapowl]

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.

 

 

 

 

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.

 

 

[ankitdetroja]

Thank You @akapowl for your quick reply. 😉