Jump to content
Search Community

Dynamic SVG <path> animation on mouse hover

angelaferrell test
Moderator Tag

Recommended Posts

I'm trying to use the technique from this site - the paths animate on hover in the background.

https://shantellmartin.art/

 

Do I just use an array of <path> and generically animate it if it's under the mouse?

 

Not sure how to tackle this but thought someone might.

Hopefully OSUBlake or Craig_PointC will see this post.

 

I've seen some possible ideas to get me started in the SVG Gotchas post, but I'm just not sure.

 

Link to comment
Share on other sites

 

Also, on that page you linked to, they seem to use some sort of proximty detection, and adjust the speed of the tween depending on that.

 

I don't know, if by now, this is doable in an easier way, with all the tools, that are integrated into GSAP, but I remembered, that there was a tutorial on tympanus.net (Codrops), that still used TweenMax 1.20, so I gave it a shot, and put together a codepen, following what that example below shows, when you hover over the heartbutton - just in case, that is something you want to consider for your project.

 

https://tympanus.net/Development/ProximityFeedback/index7.html

 

See the Pen dd1479ea25f5b288da3231adf34f94ca by akapowl (@akapowl) on CodePen

 

 

 

Happy approximating :) 

 

 

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