Magnetic Goo morphing paths following mouse

[Risko]

Hi guys,

 

I am trying to replicate an effect I have seen implemented with animate.js while using some sort of parallax effect and morph, and would prefer using GSAP for this.

 

Original pen (replicated from a Codrops article on svg Morphing) can be found there: 

 

See the Pen RjBKeQ by redheadedmandy (@redheadedmandy) on CodePen

 

 

Ultimately, I'd like to "invert" the condition of the effect, meaning that when my mouse gets close to the shape, that shape gets "attracted" or snaps to the mouse, up to a point where it snaps back to original place. Best way to put it, I'd like to make a "Magnetic goo" that's dynamic when the mouse enters my container, and snaps back when mouseleave.

(that's what I didn't quite like with the original implementation, it goes all over the place).

 

I could probably just alter the original pen above and transform it to GSAP (anyway to do that btw?), but mouse positions are still quite obscure to me and since I'm new to GSAP and wanna learn it, I guess it's better to ask the pros! Any pointers to the best technique with a starting approach would be very well appreciated!

 

Approach:

 

- I've thought originally of using the "paralaxit" code of @Sahil as a starting point, in a related post here:

 

So that's what I implemented so far in my pen. But I have no idea how to change the d values of my path themselves slightly to follow the same idea, instead of the shape as a whole and its scale.

 

My second approach was potentially to use gaussian blur and color matrices by creating a small "dot" that would alter my shape when the mouse enters the container, similar to what was done in the pen below. Would that be a better approach?

 

See the Pen dXKNOP by n0o0 (@n0o0) on CodePen

 

Thanks in advance for your help and pointers!

 

PS: If I need to start with a simpler shape, to understand the approach better and simplify calculations, I'm down for that. I'm as much interested in understanding the process itself than achieving the result I have in mind!

 

See the Pen GxbKjN by risko (@risko) on CodePen

[Carl]

Hi Risko,

 

Welcome to the GreenSock forums.

Thanks for all the demos. I really liked the Magnetic Goo! one. Very cool.

 

I've read this thread a few times and it looks like some other have as well. I'm kind of struggling with understanding how to help.

Its a pretty ambitious effect to take on for someone beginning with GSAP. Quite frankly I'm not so sure I know what a reasonable solution would be given my level of understanding of the question. 

 

We really try to keep our support focused on the GSAP API as figuring out advanced like this can be pretty time consuming. 

 

it looks like in your yellow example you have a single path. I think it will be fairly complicated to dynamically morph that path in relation to the mouse position.

 

True SVG Goo is created by blurring multiple items and using the right filters. So for each blob of goo, you probably want 2 or 3 circles that stay close to each other as they  get pulled towards the mouse

 

See the Pen JpYKOg by chrisgannon (@chrisgannon) on CodePen

 

 

https://tympanus.net/Tutorials/SVGLoaderGSAP/index7.html

 

https://codepen.io/chrisgannon/post/how-to-make-an-svg-lava-lamp

 

See the Pen GZNgLw by chrisgannon (@chrisgannon) on CodePen

 

 

Here Sahil created demos and a video explaining how to get a grid of shapes to be attracted to the mouse.

 

There are probably some techniques you can use.

 

 

 

 

 

Unfortunately, I just don't know how best to advise you to make magnetic goo that reacts to mouse movement but hopefully some of these resources help.