Elastic drag menu item on hover

[redfawx]

Hi Team,

 

   I've noticed that some modern design agencies are implementing an interaction feature where items will elastically drag from their origin when the mouse hovers over them. Is this something that can be accomplished when using GSAP? If so can someone show me how? I noticed this effect on the desktop menu at https://cuberto.com/

[ZachSaucier]

Hey redfawx and welcome.

 

Yes, this sort of effect can be done using GSAP. Here's a thread about it:

 

Here's a canvas implementation: 

 

Another approach:

 

[redfawx]

@ZachSaucier Thank you so much!