Interaction Effects (Ripple)

Key features 6

Instant Visual Feedback

Create smooth ripple animations that provide instant visual feedback for user interactions.

Full Visual Control

Customize colors, gradients, opacity, size, blend modes, easing, and animation timing to perfectly match your UI style and brand.

Flexible Origin Control

Choose where the ripple starts for precise and intentional visual behavior.

Multiple Trigger Modes

Trigger ripples on click, touch, or hover, adapting the interaction to each device.

Cross-Device Support

Works smoothly on both desktop and mobile devices.

Fast & Lightweight

Smooth, responsive animations with no performance impact and no workflows or external libraries required.

In detail

Fully Customizable

Single color or gradient ripples, with up to three colors
12 blend modes to control how the ripple mixes with the content underneath
6 easing modes, from linear to a ready-made cubic-bezier curve
Independent control over initial opacity, diameter and duration

Interaction Control

The ripple starts where the user touched, at the center, or from the edge
Triggered by click and touch, or by hover
Size calculated from the target element itself, so it stays right on any screen

Built to Behave

The ripple never escapes the element bounds, and the blend mode never leaks outside it
Out-of-range values are adjusted instead of refused, so a wrong number never breaks the effect
Existing positioning is preserved and text is not selected on click
No workflows and no external libraries required

How to use 7

01
Enable the option to set an ID
In the Bubble editor, go to "Settings > General > Advanced options" and check "Expose the option to add an ID attribute to HTML elements". The plugin finds the target element by its ID, so without this option there is nothing to attach the effect to.
02
Give the target element an ID
Select the element that should ripple, a button, a group, a shape or an image, and set its ID Attribute in the element inspector.
To prevent compatibility issues, avoid starting IDs with numbers or symbols. Start with letters and use hyphens or underscores.
03
Insert the plugin element anywhere on the page
Place Interaction Effects - Ripple anywhere on the page and keep it visible. It renders nothing of its own: it attaches the effect to the element you point it at.
In Bubble, any element-type plugin must be visible to work properly.
04
Point the plugin at the ID
In the plugin element, type the ID you set in step 2 into Element ID. The field accepts a dynamic expression, so one plugin element can follow whichever target your workflow is dealing with.
Changing the ID moves the effect: the previous listener is removed before the new one is attached, so switching targets never leaves two effects running.
05
Choose the colors
Color 1 is the only required one. Adding Color 2 and Color 3 turns the ripple into a gradient, and Opacity sets how strong it starts before fading out.
06
Shape the animation
Diameter factor sets how far the ripple grows relative to the element, Duration how long it takes in milliseconds, and Easing mode the curve it follows. Blend mode decides how the color mixes with whatever is underneath, which is what makes a light ripple readable over a dark button and the other way around.
07
Choose where it starts and what triggers it
Origin mode starts the ripple at the pointer, at the center, or at the nearest edge. Trigger mode fires it on click and touch, or on hover.
The plugin writes position: relative and overflow: hidden on the target element, so the ripple stays inside it. If your layout relies on content overflowing that element, apply the effect to a wrapper instead.
The ripple is a circle growing inside the element's box, not its visible shape. On a rounded shape it still expands within that box, so for a circular look apply it to a button or a group that already clips its content.

RIPPLE EFFECT 11

General

Element ID

text

Provide the ID that was assigned to the target element.

defaultno default

Origin mode

Sets where the ripple starts when triggered.

pointer
center
edge

defaultpointer

Trigger mode

Sets how the ripple effect is activated on the target element.

click/touch
hover

defaultclick/touch

Appearance

Color 1

color

Sets the first ripple color.

default#FFFFFF

Color 2

color

Sets the second ripple color for gradient effects (optional).

defaultno default

optional

Color 3

color

Sets the third ripple color for gradient effects (optional).

defaultno default

optional

Initial opacity

number

Sets the initial opacity of the ripple effect (0 - 1).

default0.5

Effect

Diameter factor

number

Sets the the overall size of the ripple effect (0 - 4).

default2

Duration

number

Sets the duration (in milliseconds) of the ripple animation (0 - 4000).

default500

Easing mode

Sets the easing of the ripple animation.

linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier

defaultlinear

Blend mode

Sets how the ripple color blends with the background content.

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion

defaultnormal

The result of this effect will depend on the background used on the target element.

FAQ 4

Why use Interaction Effects (Ripple)?

Modern interfaces rely on instant visual feedback to feel responsive and intuitive. Subtle effects like ripples help users understand that their interaction was recognized.

Is any specific or advanced knowledge required to use the plugin?

No. The plugin is designed to be simple and straightforward. You only need to assign an element ID and configure the effect properties in the editor.

Which elements can receive the ripple effect?

Any element that has an ID can be used as a target, including text, buttons, groups and images.

The ripple is not appearing. What should I check?

Make sure the plugin element is visible on the page, that the target element ID matches exactly, that the ID is valid and does not start with a number, that the color or initial opacity is not completely transparent, and that the animation duration is greater than zero.