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

5 minutes ago, Cassie said:

There's no magic matrix knowledge-download.

r0RjYUz.jpg

  • Haha 5
Link to post
Share on other sites

Yup. Set myself up for that one.

  • Haha 2
Link to post
Share on other sites

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 388bae8d0f760b3e16887d63cfc10a29 by osublake (@osublake) on CodePen

 

 

  • Like 4
Link to post
Share on other sites

Amazing. My approaches always feel so clumsy next to yours. 😂 

I really want to get more comfortable with utilising maths more in coding over the next while. 

I tidied mine up a little more. Pretty happy with how jolly it feels. Might pop it on my website.

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

  • Like 3
Link to post
Share on other sites

Love the split text addition!

 

32 minutes ago, Cassie said:

I really want to get more comfortable with utilising maths more in coding over the next while. 

 

This is a good place to start. I've learned so much from his videos.

https://www.youtube.com/user/codingmath/videos

 

 

  • Like 3
Link to post
Share on other sites

Ah! Amazing. Thanks so much for this Blake.

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

How did you come up with this idea

It is just animate Y point 

 

 p.svgPoint.y = p.startY + p.radius * Math.sin(p.angle);
Link to post
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 post
Share on other sites

Throw in a radius animation, and then you can change how big the circle is. The allows for the height of the wave to be dynamic. For example, it can start out small, and then get bigger, or vice versa.

 

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

 

 

  • Like 5
Link to post
Share on other sites

Such an amazing skill and wonderful talent.. thank you all for your art and efforts 🌹

I'd like to try them on Arabic websites and see if they can fit with the Arabian cultures and arts.

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.

×