Jump to content
Search Community

Liquid Button Using GSAP Library

DLong test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Quote
5 hours ago, OSUblake said:

I added my wave technique to Cassie's pen, so a little more complicated. I also added in the direction detection, so the wave starts on the side of the button you hover over.

 

 

See the Pen

See the Pen 388bae8d0f760b3e16887d63cfc10a29 by osublake (@osublake) on CodePen

by osublake (@osublake) on CodePen

 

 

 

 

 that is amazing, 

 

Link to comment
Share on other sites

It's just a way to do circular motion, which is nice because of the way it repeats itself. However, I'm not doing the X movement, so it only moves up and down.

 

This shows how to do X movement, Y movement, and how combining them makes circular movement.

 

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

 

 

 

 

  • Like 4
Link to comment
Share on other sites

  • 1 month later...

Hey! I'm a little late to the party here, but Cassie sent me this thread a few weeks ago, and it inspired me to write a tutorial on achieving a similar button effect. Here's an example from the tutorial: 

 

See the Pen MWppJao by georgedoescode (@georgedoescode) on CodePen

 

And here's the tutorial itself: https://georgefrancis.dev/writing/create-a-liquid-hover-effect-with-gsap-and-svg/

 

Hopefully it comes in handy for some folks trying to recreate this kinda thing in the future :)

 

 

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

You could achieve something close to their effect using my method, by "pushing" the points using a fixed variable, rather than the mouse position. 

 

I did this in the demo animation for the tutorial: 

 

See the Pen Popppge by georgedoescode (@georgedoescode) on CodePen

 

May be of some help! It's not exactly the same, but could be something to go off :)

  • Like 5
Link to comment
Share on other sites

4 minutes ago, GreenSock said:

Welcome to the forums, @George Francis. And thanks for writing up and sharing that article! 🙌

 

Keep 'em coming. And of course feel free to hang out in these forums and help others. We love having knowledgeable folks chiming in whenever possible. 

 

10 minutes ago, PointC said:

This is great George and welcome to the forum.

 

Please post more. You have mad SVG skills. :)

 

 

Thank you, folks! I'm exited to start playing with some more stuff, for sure :)

  • Like 3
Link to comment
Share on other sites

  • 2 months later...
  • 9 months later...

 

Hello @Mukhriddin

 

 

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

Otherwise, if you've got a GSAP-specific question, best create a new thread for that along with a minimal demo and we'd be happy to take a look. 

 

Maybe this can help get you started. Happy tweening!

 

 

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