Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
DLong

Liquid Button Using GSAP Library

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 post
Share on other sites
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

 

 

  • Like 6
  • Thanks 1
Link to post
Share on other sites

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

Link to post
Share on other sites

Oh my gosh. I love those wibbly buttons

  • Like 1
Link to post
Share on other sites
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

 

  • Like 5
Link to post
Share on other sites

Ahaha! I forgot about that one. 

*peers cautiously at the code*

  • Haha 5
Link to post
Share on other sites

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.

  • Like 1
  • Haha 2
Link to post
Share on other sites

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. 

 

  • Like 4
Link to post
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 post
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. 😁

svg-button-points.thumb.png.7c8e946d40296fd9f675107acec879dd.png

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.

 

svg-button-points-animation.gif.31499cfccbf01ae82f911663bbeda61f.gif

 

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 post
Share on other sites
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.

 

  • Like 2
Link to post
Share on other sites
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. ;)

  • Haha 1
Link to post
Share on other sites

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. 

 

 

  • Haha 3
Link to post
Share on other sites
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

 

  • Like 2
  • Haha 1
Link to post
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 post
Share on other sites

Nailed it.

ohno.gif

  • Like 1
  • Haha 5
Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

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

 

 

  • Like 5
Link to post
Share on other sites

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.

  • Like 4
Link to post
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.

×