Jump to content
GreenSock

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

Text Move Effect

Recommended Posts

Hey swatip. Which text hover effect in that website are you referring to? There are multiple different effects on the site.

Link to comment
Share on other sites

I am referring to Nav menu mouse effect "Benefits, Security"

Link to comment
Share on other sites

Hey @swatip,

 

If you would search  for e.g. 'custom-cursor-effects' you will find a lot of pointers.

for example this tutorial of tympanus.

 

If you have a special questions regarding GSAP

and a little CodePen showing your problem you are always welcome.

 

Happy tweening ...

Mikel

Link to comment
Share on other sites

8 hours ago, swatip said:

I am referring to Nav menu mouse effect "Benefits, Security"

Break it up in to each of the pieces:

  • Detecting if the mouse is in a certain range of the nav item.
  • Having a duplicate copy of the nav item within the bounds of the circle (so it can be clipped).
  • Increasing/decreasing the size of the circle.
  • Gradually moving the nav item towards the mouse cursor but with a max distance where it stops. Also stop it if the cursor itself is past a certain bounds.

Then put the pieces together.

  • Like 1
Link to comment
Share on other sites

Thank You so much

I'll try my best

 

Link to comment
Share on other sites

  • 5 months later...

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.

×