Liquid Button Using GSAP Library

[DLong]

I really want to know how to create this Amazing Liquid button on this web site anyone help me please ! 

https://www.utopiaagriculture.com/ 

[Rodrigo]

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!!!

[Cassie]

This in particular is a *wonderful* article

https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

[DLong]

Thank you 

[Shrug ¯\_(ツ)_/¯]

11 hours ago, DLong said:

create this Amazing Liquid button

 

I remember these two canvas based examples not GSAP specific. But each impressive none the less yielding similar result.

 

See the Pen VbgwEM by waaark (@waaark) on CodePen

 

See the Pen JNxKKY by Zaku (@Zaku) on CodePen

 

 

[DLong]

that's cool but I will try to use GSAP Morph 

[Cassie]

Oh my gosh. I love those wibbly buttons

[Shrug ¯\_(ツ)_/¯]

1 hour ago, DLong said:

I will try to use GSAP Morph

 

You could maybe update this older example by @Cassie to GSAP 3 as a possible starting point to work from. 😉

 

See the Pen bzXLOr by cassie-codes (@cassie-codes) on CodePen

 

[Cassie]

Ahaha! I forgot about that one. ✨

*peers cautiously at the code*

[PointC]

Very fancy @Cassie. I must have missed that one when you first made it.

 

Fortunately we have @Shrug ¯\_(ツ)_/¯ who is apparently a walking and talking search engine of demos, articles and videos.

[DLong]

I still don't know how to animate the button to make it exactly like the website, https://www.utopiaagriculture.com/approach/ look like they didn't use any morph , but

[OSUblake]

They're either animating every single point by hand...

See the Pen 7c235b8b3c2d9bb6cecea6acfff7ff37 by osublake (@osublake) on CodePen

 

...or already have the paths calculated ahead of time, and doing a frame-by-frame animation.

 

Sorry, but there is no easy solution here. 

 

[Cassie]

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.

[Shrug ¯\_(ツ)_/¯]

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

[OSUblake]

11 hours ago, Shrug ¯\_(ツ)_/¯ said:

It’s a very point-y button. 😁

 

Yeah, I noticed that. Now just extrapolate all those points into an array, and animate them in a wave similar to my demo above.

 

[PointC]

2 hours ago, OSUblake said:

Now just extrapolate all those points into an array, and animate them in a wave similar to my demo above.

Sounds like something a person with a shiny new Admin badge might do. 

[OSUblake]

Making the wave isn't hard.

 

But putting the points in an array is the busy work admins don't do. That's a hint, hint. 

 

 

[OSUblake]

4 minutes ago, OSUblake said:

Making the wave isn't hard.

 

Thinking about it, you could probably just use that with a thicker stroke.

 

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

 

[PointC]

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.

[Cassie]

Nailed it.

[DLong]

woww niceee 

[Cassie]

Not exactly like the example button - a lot less liquidy, but fun nonetheless!

See the Pen 15d1e3d339a64bbed746895dff4990b9?editors=0010 by cassie-codes (@cassie-codes) on CodePen

[DLong]

wwoww, You are so smart hm.... I'm still learning how to create wave :v , but you are  so far ahead 

[OSUblake]

This is the basis for a wave. Try playing with different values here... 

 

var delay = norm * 1.5;

tl.to(obj, {
  angle: Math.PI * 2,
  ease: "power2.inOut",
  duration: 3
}, delay);

 

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

 

 

[Cassie]

Everyone was a beginner at some point, even the super smart folks like Blake. ☺️

You have to be bad at something before you're good at it! There's no magic matrix knowledge-download.