Objects interact with mouse move

[Anas Ali Khan]

Want to make same section like on Hello Monday website in gallery/portfolio section

gsap.js index.html style.css

See the Pen RwOrWKK by Anas-Ali-Khan (@Anas-Ali-Khan) on CodePen

[Rodrigo]

Hi @Anas Ali Khan and welcome to the GSAP Forums!

 

That particular animation is not made with border radius but with masking or at least that's how I would do it. @mvaneijgen one of the superstars here in the forums wrote this guide on masking:

 

Hopefully this helps you getting started.

Happy Tweening!

[Anas Ali Khan]

Thank You  For Your Reply!

And this feature can apply with mouse interacts right? 
 

 

[Rodrigo]

Yeah definitely. Be aware though that is not a simple mouse enter/leave events since you need also the coordinates of the mouse pointer inside the element to morph the SVG in the way you want. Again not impossible but it has some complexities.

 

Happy Tweening!

[Anas Ali Khan]

Absolutely, I appreciate the heads-up about the complexities involved. I'm keen to dive into this challenge, though. Do you have any recommended resources or examples that demonstrate similar effects with SVGs and mouse interactions? Specifically, I'd love to see how to accurately track mouse coordinates within an SVG element and use that data to morph the SVG shapes in real-time. Also, any tips on managing performance issues that might arise from such real-time graphics manipulation would be incredibly helpful. Thanks again for your guidance!

[Rodrigo]

Keep in mind that the mousemove event can be added to any DOM element:

https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event

 

Also take a look at the demos by @nico fonseca and @akapowl in this thread

 

As for the path manipulation you can play with the d attribute on an SVG path in order to create the bezier based on the mouse position:

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d

 

But be aware that is in no case a simple endeavor since you'll have to create the beziers by hand on the mousemove event and apply those to the d attribute in the path element.

 

Another option is to create animations using the MorphSVG Plugin and control them based on the mouse position:

https://gsap.com/docs/v3/Plugins/MorphSVGPlugin

 

Happy Tweening!