SVG Animation Morph with MouseMove

[liamb]

I'm looking for a way to achieve something similar to the planet design at: https://cuberto.com/

 

Obviously, they have a very advanced setup, but the main point I'm trying to achieve is that SVG mask for the stary background.

 

I apologise for not having a codepen to attach, as I'm genuinely stumped with where to start.

[PointC]

Hi @liamb

 

Welcome to the forum.

 

It looks like they have a handleMorph() function which is cycling the morph between 3 shapes. They also have a registerMorphMove() function that grabs the mouse position and changes the scale, rotation, x and y positions of the morph mask in response. That's how they get the nice fluid feel to everything.  

 

I'm not sure I follow exactly what you're asking.  Are you asking how to set up a SVG mask? Or is it more about the morph and the mousemove event and handler?

 

Happy tweening.

 

[liamb]

Hi @PointC,

I guess I'm trying to make the background... Probably not the best thing to dive into as my first project but why the heck not right? haha...

 

Reading through:

I've found a few similarities in what we're both ultimately trying to achieve. I've set up a very rough and non-working code pen.

 

 

I'm currently trying to combine these two pens:

See the Pen WMzvxE by smallio (@smallio) on CodePen

 

See the Pen mxOXQQ by osublake (@osublake) on CodePen

 

 

I feel like if I replaced the plus signs with slightly wobbly circles, I could pull off a similar effect, although I'm really not sure what I'm doing.

 

 

Update: My current Pen

See the Pen zLwoEG by liamb (@liamb) on CodePen

 

[PointC]

Okay - those examples are both using canvas. The website you referenced is using SVGs and morphing so I'm still unclear on the effect you're after here. But it looks like you found a couple pens that should get you started and keep you busy. If you have GSAP related problems or questions as you progress, we're happy to help.

 

Happy tweening.

 

[Sahil]

You can go through following thread where I have explained how you can move points based on mouse position. Now think of those blobs made of points, you will have to keep track of their original position by creating array or by creating objects for those points. And then you can animate them using same calculation that I have explained. To reduced movement based on how far mouse is, you can take some large distance like a diagonal and compare it with current distance between mouse and original position to determine the movement.

 

 

You can create it using canvas or svg, just minor difference in how you keep track of your points. You already have example with canvas, following is example by @OSUblake using svg.

 

See the Pen vdzjyg by osublake (@osublake) on CodePen

 

 

Once you have figured out how to do that using SVG, you can easily use your blobs for masking. You will just have to move your target element inside the mask. And no, if you replace those plus signs with circles, it will create cloud like shapes instead like blobs.