PointC Posted April 16, 2021 Share Posted April 16, 2021 5 minutes ago, Cassie said: There's no magic matrix knowledge-download. 6 Link to comment Share on other sites More sharing options...
Cassie Posted April 16, 2021 Share Posted April 16, 2021 Yup. Set myself up for that one. 2 Link to comment Share on other sites More sharing options...
OSUblake Posted April 17, 2021 Share Posted April 17, 2021 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 5 Link to comment Share on other sites More sharing options...
Cassie Posted April 17, 2021 Share Posted April 17, 2021 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 3 Link to comment Share on other sites More sharing options...
OSUblake Posted April 17, 2021 Share Posted April 17, 2021 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 3 Link to comment Share on other sites More sharing options...
Cassie Posted April 17, 2021 Share Posted April 17, 2021 Ah! Amazing. Thanks so much for this Blake. Link to comment Share on other sites More sharing options...
DLong Posted April 17, 2021 Author Share Posted April 17, 2021 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 More sharing options...
DLong Posted April 17, 2021 Author Share Posted April 17, 2021 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 comment Share on other sites More sharing options...
OSUblake Posted April 18, 2021 Share Posted April 18, 2021 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 4 Link to comment Share on other sites More sharing options...
OSUblake Posted April 18, 2021 Share Posted April 18, 2021 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 5 Link to comment Share on other sites More sharing options...
keko_ferkeko Posted April 18, 2021 Share Posted April 18, 2021 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 comment Share on other sites More sharing options...
George Francis Posted May 25, 2021 Share Posted May 25, 2021 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 4 1 Link to comment Share on other sites More sharing options...
PointC Posted May 25, 2021 Share Posted May 25, 2021 This is great George and welcome to the forum. Please post more. You have mad SVG skills. 2 1 Link to comment Share on other sites More sharing options...
DLong Posted May 25, 2021 Author Share Posted May 25, 2021 Nice one but still the button animation from Graze Utopia website. I really want to know they animated every single point in that svg you can see at the end of buton the wave still going Link to comment Share on other sites More sharing options...
GreenSock Posted May 25, 2021 Share Posted May 25, 2021 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. 3 Link to comment Share on other sites More sharing options...
George Francis Posted May 25, 2021 Share Posted May 25, 2021 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 5 Link to comment Share on other sites More sharing options...
George Francis Posted May 25, 2021 Share Posted May 25, 2021 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 3 Link to comment Share on other sites More sharing options...
Cassie Posted May 25, 2021 Share Posted May 25, 2021 Yay George dropped in! Lovely to see you in here pal. 🙌 1 Link to comment Share on other sites More sharing options...
DLong Posted August 3, 2021 Author Share Posted August 3, 2021 Hi guys, I did it , I figure out how to create this animation See the Pen oNWMYbd by longd (@longd) on CodePen 3 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 3, 2021 Share Posted August 3, 2021 Awesome! How did you figure it out? Link to comment Share on other sites More sharing options...
DLong Posted August 3, 2021 Author Share Posted August 3, 2021 based on source code from their website , using Chrome Developer tool I just went through every steps, it is just so complex. Link to comment Share on other sites More sharing options...
Mukhriddin Posted May 29, 2022 Share Posted May 29, 2022 On 4/14/2021 at 8:40 PM, Shrug ¯\_(ツ)_/¯ said: I remember these two canvas based examples not GSAP specific. But each impressive none the less yielding similar result. Hi. How can I implement something like this using GSAP? bandicam 2022-05-29 15-20-23-783.mp4 Link to comment Share on other sites More sharing options...
akapowl Posted May 29, 2022 Share Posted May 29, 2022 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now