Jump to content
Search Community

Attach menu icon to cursor on hover

Guest undefined
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Guest undefined

Hello everybody,

 

I'm new new here in the forum and new to GSAP. I want to make an effect similar to the hover effect on https://themads.agency. When you hover over the menu icon it will be attached to the cursor in a particular radius. I got the custom cursor working but now I'm stuck with the positioning of the icon.

 

See the Pen VBKpwP by marcbruederlin (@marcbruederlin) on CodePen

 

Can someone help me or lead me in the right direction?

Also, does someone have resources to learn how to create such interactions? I really want to learn the logic behind.

 

Thank you!

Link to comment
Share on other sites

This is interesting :) And, I think actually doing something a bit different (vs changing the cursor icon) could work well ... instead of changing the cursor icon you could

 

1. hide the cursor

2. tween the change of the menu icon while

3. tweening the position of the menu icon to the cursor position

 

Here is a simple CodePen demonstrating the basics of this

 

See the Pen QBKvvN by sgorneau (@sgorneau) on CodePen

 

  • Like 4
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...