danielv Posted May 27, 2024 Posted May 27, 2024 Hello lovely people on the GSAP forum! I have something that I need your help with. I'm a starting Webflow developer and I've wanted to dive into GSAP for quite some time, but never had a project that required it... Until now I have a client that really likes the https://madebyshape.co.uk/ website, especially the hover animation on the button of the hero (only visible in Chrome and Safari). I have delved into the code behind it, but can't seem to figure out how they did it. I suspect they might've done it with GSAP. My question is: is this something that would be possible with the use of GSAP in Webflow and where should I start? I would love to see your ideas on this! Wish you all a wonderful day or night
Rodrigo Posted May 27, 2024 Posted May 27, 2024 Hi @danielv and welcome to the GSAP Forums! As far as I can tell that is not the simplest thing to do. My first try would be SVG and the MorphSVG Plugin, which is a benefit of GSAP Club members: https://gsap.com/docs/v3/Plugins/MorphSVGPlugin https://gsap.com/pricing/ This demo by @PointC shows a similar effect (even better IMHO): See the Pen oqeJbo by PointC (@PointC) on CodePen. Perhaps you could borrow some logic from that demo. Hopefully this helps getting you started. Happy Tweening!
Cassie Posted May 28, 2024 Posted May 28, 2024 Jumping in to say that (luckily) it actually is pretty easy - it's all down to the SVG filter! https://css-tricks.com/gooey-effect/ Warning that this effect is quite bad for performance, so keep it for quick small interactions like buttons, don't try and 'goo-ify' lots of things/large elements/or animate infinitely using this filter. Quick and small! <filter id="alienGoo"> <fegaussianblur in="SourceGraphic" stdDeviation="24" result="blur" /> <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 28 -8" result="goo" /> <feblend in="SourceGraphic" in2="goo" /> </filter> <filter id="gooDrip"> <fegaussianblur in="SourceGraphic" stdDeviation="10" result="blur" /> <fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 24 -7" result="goo" /> <feblend in="SourceGraphic" in2="goo" /> </filter> <clippath id="theClipPath"> <rect x="325" y="500" width="350" rx="8" ry="8" height="180"/> </clippath> <filter id="glow" x="-50%" y="-50%" width="200%" height="200%"> <fegaussianblur id="glowBlur" stdDeviation="14" result="blur"/> <femerge> <femergenode in="blur"/> <femergenode in="SourceGraphic"/> </femerge> </filter> 2
Rodrigo Posted May 28, 2024 Posted May 28, 2024 Oh that's super easy, nice and performant ? Thanks for the info @Cassie! 1
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