Jump to content


SVG Animation Morph with MouseMove

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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.



  • Like 2
Link to comment
Share on other sites

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


Link to comment
Share on other sites

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.



  • Like 2
Link to comment
Share on other sites

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.

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