How to create button water effect(displacement map) with newer gsap version

[Bayu Handono]

How to create water effect on button with gsap version 3x..

 

Button number 8 in this :

https://tympanus.net/Development/DistortedButtonEffects/

 

I've tried implementing it on my web but the effect on the button doesn't work well.

 

https://bayu.monster/404

 

 

Here is the code:

 

 

I hope someone can help me Thank you

See the Pen ExMRNpR by byhndo (@byhndo) on CodePen

[ryan_labar]

Are you able to link this image to your SVG in your CodePen? xlink:href="img/ripple.png" is 404ing.

[Bayu Handono]

25 minutes ago, ryan_labar said:

Are you able to link this image to your SVG in your CodePen? xlink:href="img/ripple.png" is 404ing.

Yes, I solved that problem by saving the png on my host and it worked. 

But the problem is not that, I want the effect to work properly like on this page 

https://tympanus.net/Development/DistortedButtonEffects/

 

 

And I tried to apply it with gsap version 3.12.5 but it doesn't work well on my web page https://bayu.monster/404

 

Hello can you help @OSUblake

[ryan_labar]

Please avoid @-ing specific moderators, as it's rather impolite. I'm not seeing a button on your website's example, and your CodePen still isn't properly linking the the distortion image, but I'm assuming you're looking to improve the distortion effect on the '0' in '404', is that correct?

It would be easier for us to help debug this if you updated your CodePen with the actual effect you're looking for—my guess is that the differences you're seeing in the effect are due to timing, scale, and that your image has a solid fill rather than an outline, but without a codepen properly showing this it's rather difficult to debug.

[Bayu Handono]

3 minutes ago, ryan_labar said:

Please avoid @-ing specific moderators, as it's rather impolite. I'm not seeing a button on your website's example, and your CodePen still isn't properly linking the the distortion image, but I'm assuming you're looking to improve the distortion effect on the '0' in '404', is that correct?

It would be easier for us to help debug this if you updated your CodePen with the actual effect you're looking for—my guess is that the differences you're seeing in the effect are due to timing, scale, and that your image has a solid fill rather than an outline, but without a codepen properly showing this it's rather difficult to debug.

That's right, I want to apply the effect to the red "0" on my 404 page. The effect is working but not working properly. Because I want to use the code from gsap 1.19 to gsap 3.12.5 version.

 

In this section (gsap 1.19 version):

bt.addEventListener('click', function(e) {

    TweenLite.set(turb, { attr: { x: isFF ? e.offsetX : e.offsetX + 10, y: isFF ? e.offsetY : e.offsetY + 10, width: 0, height: 0 } });

    TweenLite.to(turb, 3, { attr: { x: '-=300', y: '-=300', width: 600, height: 600 } });

    TweenLite.fromTo(dm, 2, { attr: { scale: 30 } }, { attr: { scale: 0 } });

  });

}

 

To gsap version 3.12.5:

 

bt.addEventListener('click', function(e) {

    gsap.set(turb, { attr: { x: isFF ? e.offsetX : e.offsetX + 10, y: isFF ? e.offsetY : e.offsetY + 10, width: 0, height: 0 } });

    gsap.to(turb, 3, { attr: { x: '-=300', y: '-=300', width: 600, height: 600 } });

    gsap.fromTo(dm, 2, { attr: { scale: 30 } }, { attr: { scale: 0 } });

  });

}

[Rodrigo]

Hi,

 

This is a fork of Blake's codepen using GSAP 3 syntax, nothing extremely complex:

See the Pen mdoKMgG by GreenSock (@GreenSock) on CodePen

 

Is worth noticing that the codrops demo (not always the easiest things to re-created might I add) is using masking for the specific effect. I'd suggest you to check this thread by @mvaneijgen on the subject:

 

Hopefully this helps.

Happy Tweening!

[Bayu Handono]

1 hour ago, Rodrigo said:

Hi,

 

This is a fork of Blake's codepen using GSAP 3 syntax, nothing extremely complex:

 

 

 

Is worth noticing that the codrops demo (not always the easiest things to re-created might I add) is using masking for the specific effect. I'd suggest you to check this thread by @mvaneijgen on the subject:

 

Hopefully this helps.

 

Wow thank you, I've gotten the points. And it went well. Thank you.