SVG web sticky animation

[Gnekr]

Hello! Help with advice on how to get started with SVG. I have a SVG web, and I want its center to stick to the mouse cursor with an elastic effect, and when leaving it, spring back to its original position. Or is it impossible to solve the problem with such an SVG? Thank you in advance! 

See the Pen ZEwyjVL by cnqftxxr-the-looper (@cnqftxxr-the-looper) on CodePen

[akapowl]

 

Hello @Gnekr

That SVG looks very much like the SVGs in these other threads a couple of weeks ago.
 

 

 

As was already mentioned in those threads, what you're trying to achieve is entirely possible, but will not be simple at all, which is why that is quite a bit out of scope of what to expect as support from these free support forums; especially if you do not provide anything you have tried yourself that we could offer hints or advice on - please read the forum guidelines.

Key to getting something like you intend done, is understanding how SVG works in the first place, so you can then go on and tinker with values that might be relevant for your expected animation goal.

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

 

There will be many, many things you will have to keep an eye on, so if I were you, I would start simple and work my way up the complexity from there. With regard to how exactly you want things to behave it might be better to re-work your SVG so it's easier to manipulate to get the exact effect going, that you aim for (as also mentioned in the linked threads).

Below is a rather basic example just to help get you started with something - not intended to serve as a working solution for you.

 

Note:

I used the .getBoundingClientRect method to get the dimensions I need to map to the SVGs dimensions, just because it works for me.
This likely might not work for your setup, and you may have to use some other way to determine the dimensions you need to work with.

 

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

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

 

 

 

What will probably come in handy, is having a look at GSAP's utility functions, especially mapRange.
https://gsap.com/docs/v3/GSAP/gsap.utils/
https://gsap.com/docs/v3/GSAP/UtilityMethods/mapRange()

 

I didn't use it in my example, but you could also have a look at GSAP's Observer, as an alternative to the plain eventListeners I used...
https://gsap.com/docs/v3/Plugins/Observer/

...and GSAP's .quickSetter() or .quickTo() for setting / tweening the values on mousemove.
https://gsap.com/docs/v3/GSAP/gsap.quickSetter()/

https://gsap.com/docs/v3/GSAP/gsap.quickTo()/

 

Also it might help in the long run for getting a better understanding of how to animate SVG to have a look at
https://www.motiontricks.com/

I doubt you will find an exact example of what you're aiming for there, but it offers some neat tutorials and great general advice on how to best work with SVG when animating.

 

Beyond that, if you have any questions directly related to GSAP, also please keep it simple instead of listing a bunch of requirements that you expect others to provide a full-fledged solution for. This forum is not intended to give out custom crafted code examples to anyone asking for it, but to help with problems encountered when using the tools provided. Stitching the little pieces together and developing the logic behind that to achieve your goal, will be yours to do.

And as also mentioned in the other threads already;
If you see no way to achieve something like that yourself, you might want to explore paid consulting options with GreenSock by reaching out to them directly,

or as an alternative you always have the option to post in the "Jobs & Freelance" forum to try and hire someone else that can help you with your tasks.

Good luck with the project!

Edit:

Here's that same example using multiple paths, just to give you a better idea for your more complex scenario.

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

 

[Toso]

finally, I understood what he wanted in his first post, and thanks to  @akapowl

[Gnekr]

@akapowl Thank you for the idea! Everything worked out. For those who are interested in the result or want to improve the code, here is the link

See the Pen LYqBwBv by cnqftxxr-the-looper (@cnqftxxr-the-looper) on CodePen

[Rodrigo]

Elastic fun!!

 

Great job @Gnekr and thanks for sharing your result with the community 💚

 

Happy Tweening!