Hello,
Would you know how to design the same animated waves that we can see on these pricing tables?
Do we have to use an image, or can the wave shape be designed directly from Webflow?
Thank you!
Looks like the site uses transparent pngs
I believe to do this in Webflow then the easiest way would be to use interactions.
I don’t ‘think’ that you could do it with a simple hover state change as both of the PNG’s are animating at different rates so that would need extra control over each image.
I did a very very quick mockup of just the images using a hover state animation here :
As I said though I don’t think you’d be able to do what you need here without using interactions though as the transition that you would set would affect both background images at once so you wouldn’t end up getting the differing animations on the images.
Hope that helps a bit.
Best wishes,
Mark
Actually I lie!!
Have it working. Give me a few minutes.
Best wishes,
Mark
Here you go 
Preview link here - https://preview.webflow.com/preview/wt-tips?preview=eb94b36dd43e4ec43d502a4e57c45ec9
Hope that helps a bit.
Best wishes,
Mark
Sorry if the GIF animations above aren’t looping! I completely forgot to set that so you may need to refresh the page and scroll down quickly to see it or just go to the preview link instead.
Best wishes,
Mark
Actually for anyone reading this could they take a look at it and let me know why in the second example I’ve provided in that preview link that when you hover over the bottom of the box then the animation fires as you would expect but as soon as you go over the text items it stops it from firing or destroys the animation.
Also the text seems to change colour too?
Many thanks,
Mark
EDIT - Seems to just be in the designer preview mode in Safari that it’s doing this so I believe I may have it all working!
Okay spoke too soon. Now the PURCHASE button colour animation doesn’t work!! I’ll leave that for someone else to figure out I think. I’m probably going to make this more complex than it needs to be otherwise. Just happy that I figured that much out 
Okay have part of it working now in that the animation fires when you hover over any of it. Had a slight z-index issue going on.
The text still changes its looks though so if anyone has any ideas as to that one I’d be really grateful for any help there as I’d like to use something like this on my own site at some point.
Best wishes,
Mark
1 Like
You could trigger an overlay to appear over a link block instead of a button when the the main item is hovered over.
Hiya,
Thanks for that although I’ve got to admit I’m not entirely too sure what you mean? 
Could you possibly let me know a little more?
Many thanks,
Mark
Thank you Mark for the time you spent on this, much appreciated!
No problem at all.
Unfortunately I got busy with something else and so hadn’t finished this off yet but I’m definitely going to revisit it soon and get the whole thing working fully.
If it helps you in the meantime though then glad to have been off some assistance.
Best wishes,
Mark
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.