Ripple Effect for Webflow — Fully Configurable and No-Code

How it works

Implement in Webflow
Apply the attributes to the elements inside the page
Below is a list ofelements andoptions to apply the ripples effect.
component
I want this
Element
to get the ripples effect.
Add this attribute
Name
fc-ripples

Value
component

Description
Defines the HTML element for the ripples effect.
This attribute should be applied to an element with a background image.
group (OPTIONAL)
I want this
Element
to wrap multiple components into one group.
Add this attribute
Name
fc-ripples

Value
group

Description
Wraps multiple components into one group. When present, a single test interface will control all components inside this group.
This attribute should be applied to an element (Div Block, Collection List, etc.) wrapping all the components that should be grouped together.
toggle button (OPTIONAL)
I want this
Button
to toggle the ripples effect on or off.
Add this attribute
Name
fc-ripples

Value
toggle

Description
Defines the Button that toggles the ripples effect on or off.
This attribute should be applied to a button (built out of a custom element) inside the component.
Option
resolution
I want to state the width and the height of the texture.
Add this attribute
Name
data-resolution

Value
512

Description
This value states the width and height of the WebGL texture to render to. The larger this value, the smoother the rendering and the slower the ripples will propagate.
Default value is 512.
Suggested values for best results: between 64 and 2048.
Where?
This attribute should be applied to the component.
Option
drop radius
I want to state the size of the drop.
Add this attribute
Name
data-drop-radius

Value
15

Description
This value states the size (in pixels) of the drop that results by clicking or moving the mouse over the canvas.
Default value is 15 pixels.
Suggested values for best results: between 1 and 50 pixels.
Where?
This attribute should be applied to the component.
Option
perturbance
I want to state the amount of refraction caused by a ripple.
Add this attribute
Name
data-perturbance

Value
0.004

Description
This value states the amount of refraction caused by a ripple. 0 means there is no refraction.
Default value is 0.004.
Suggested values for best results: between 0 and 0.1.
Where?
This attribute should be applied to the component.
Option
disable mobile
I want to disable the effect on mobile devices.
Add this attribute
Name
fc-ripples-disable-mobile

Value

Description
If present, disables the effect on mobile devices (max-width: 767px). Can be used as a boolean attribute (no value required).
Where?
This attribute should be applied to the component.
Option
config
I want to activate the test interface to tweak the ripples effect parameters.
Add this attribute
Name
fc-ripples-config

Value

Description
Activates the test interface to tweak the ripples effect parameters, and sets the panel title for the UI.
Where?
This attribute should be applied to the component or the group.

exploring the sea

How it works

Implement in Webflow

Apply the attributes to the elements inside the page