Jump to content
Search Community

Recommended Posts

Posted

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 :) 

Posted

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!

Posted

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>

 

  • Like 2
Posted

Oh that's super easy, nice and performant ? 

Thanks for the info @Cassie!

  • Like 1

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