GCS Studios
Instant Visual Feedback
Create smooth ripple animations that provide instant visual feedback for user interactions.
Why use this?
Built for what Bubble does not cover.
Bubble's native click feedback is basically based on a background color change with transition controls. Nothing else can be added without custom code.
Key features 6
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
Reliable & Production-Ready
- Built with lightweight CSS and JavaScript for fast, reliable performance
- Designed around practical use cases and real Bubble development needs
- Tested in real-world applications before being released publicly
- Created to extend Bubble with functionality and customization beyond what native Bubble elements typically offer
How to use 4
-
01
Enable the option to set an ID
In the Bubble editor, go to the tab "Settings > General > Advanced options" and check the box "Expose the option to add an ID attribute to HTML elements".
-
02
Identify the target element
Set an ID to the target element.
To prevent compatibility issues, avoid starting IDs with numbers or symbols. Start with letters and use hyphens or underscores if needed.
-
03
Insert the plugin element anywhere on the page
Insert the plugin element anywhere on the page and ensure it is always visible.
In Bubble, any element-type plugin must be visible to work properly.
-
04
Provide the ID and set the plugin properties as desired
In the plugin element, provide the ID assigned to the target element (in step 2) and set the other plugin properties according to your needs.
RIPPLE EFFECT 11
General
Element ID
Provide the ID that was assigned to the target element.
Changing the ID moves the effect to the new target and the old one stops, so switching targets never leaves two effects running.
Some elements can't show the ripple. The effect is drawn inside the target, and Bubble elements that render as native form fields, such as Input, Multiline Input, Dropdown and Date/Time Picker, can't hold anything inside them. On those, wrap the element in a Group, set the ID on the Group and point the plugin at it: the ripple then covers the group's area.
Origin mode
Sets where the ripple starts when triggered.
Trigger mode
Sets how the ripple effect is activated on the target element.
Appearance
Color 1
Sets the first ripple color.
Color 2
Sets the second ripple color for gradient effects (optional).
Color 3
Sets the third ripple color for gradient effects (optional).
Initial opacity
Sets the initial opacity of the ripple effect (0 - 1).
Effect
Diameter factor
Sets the the overall size of the ripple effect (0 - 4).
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.
Duration
Sets the duration (in milliseconds) of the ripple animation (0 - 4000).
Easing mode
Sets the easing of the ripple animation.
Blend mode
Sets how the ripple color blends with the background content.
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.
NWD UI - Effect
This plugin is maintained by GCS Studios and is part of the NWD UI - Effect family, plugins that add visual output an element did not have, without replacing it. Each one attaches to something already on your page and draws on top of it, with no layout to redo, and is tested in real applications before release. See more plugins on the GCS Studios contributor page.