Jump to content
Search Community

Liquid Button Using GSAP Library

DLong test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi and welcome to the GreenSock forums.


That can be achieved with the MorphSVG plugin. In fact those buttons are SVG elements and that site is actually using GSAP.



The specifics of it are outside my abilities, but you could start with the samples in this thread:


Perhaps @Cassie and @PointC, our resident SVG magicians could share a pointer or two on the best approach to tackle this.


Happy Tweening!!!

  • Like 2
Link to comment
Share on other sites

Yeah, I agree with Blake here unfortunately.

I've got a lot of experience with SVG and I would struggle to recreate this. 


I would probably approach it like a sprite, create a series of paths for every step of the animation (because I'm stronger setting up in illustrator) 

and then do an animation using keyframes

gsap.to('.startPath', {
 duration: 1,
 keyframes: [
  {morphSVG: step1},
  {morphSVG: step2},
  {morphSVG: step3},
  {morphSVG: step4},
  {morphSVG: step5},
  {morphSVG: step6},
  {morphSVG: step7},
  {morphSVG: step8},
  {morphSVG: step9}

But even then, the setup would take a very long time and I'm not certain you'd get the smoothness.

It would probably take a lot of trial and error to get close. As Blake said. No easy solution.

  • Like 3
Link to comment
Share on other sites

5 hours ago, OSUblake said:

animating every single point

Yep this file 1182084.js starting at line about 13363.


It’s a very point-y button. 😁


Though the effect is not nearly as dynamic (unique) as it first appears. It’s in essence just performing a wave of points going right or left based upon mouse location. Instead of being fully dynamic like the canvas example above.




A poor man's approach might be to use the classic SVG filter gooey effect to help get results using a key object moving right/left without having to manipulate individual points. Though given it’s not as dynamic as it first appears you might be able to get creative with a morph and just play or reverse it. Lot's of ways to approach similar I suppose. But you have to start somewhere @DLong if you hope to get there.


Welcome to the forum by the way. 😉

  • Like 4
Link to comment
Share on other sites

Now why would you infer that I meant you? There are two shiny new admin badges involved in this thread. It could be anyone really. 🤷‍♂️


4 minutes ago, OSUblake said:

That's a hint, hint. 

I'd probably make something if I wasn't up to my eyeballs in course design work. Maybe @Shrug ¯\_(ツ)_/¯ wants to take a shot at it.

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