Cassie

This one is horrifyingly wonderful https://codepen.io/ste-vg/pen/VwPVZLx

Truly truly cursed codepens

Ah, I misunderstood, easily fixed - just need to add another little tween at the beginning. I updated the pen.

Ah! Amazing. Thanks so much for this Blake.

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. https://codepen.io/cassie-codes/pen/LYxBZEG?editors=0010

Yup. Set myself up for that one.

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.

Not exactly like the example button - a lot less liquidy, but fun nonetheless! https://codepen.io/cassie-codes/pen/15d1e3d339a64bbed746895dff4990b9?editors=0010

Nailed it.

You could use gsap.utils.toArray() to get all the regions, pop and shift the first and last item out and then add them to the timeline with different animations? https://codepen.io/cassie-codes/pen/c449bf643f0af06592f6b289b3dd55e6?editors=0011

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 eve

Ahaha! I forgot about that one. ✨ *peers cautiously at the code*

Oh my gosh. I love those wibbly buttons

This in particular is a *wonderful* article https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/

Yeah, interesting. The CSS version is just automagically being forced onto a new composite layer