GCS Studios
Two Elements, One Card
Point the plugin at two elements you already built, two groups, two images, two buttons, and they become the front and the back of the same card.
Why use this?
Built for what Bubble does not cover.
Bubble has no native 3D animation, so a flip effect with its different rotation directions takes a series of workflows and custom states combined with custom code.
Key features 6
Six Directions
Top to bottom, bottom to top, left to right, right to left, and two spins that rotate on two axes at once.
Timing You Control
Duration in milliseconds, dynamic, and six easing curves, including an overshoot that goes a little past the other side and settles back.
Depth of the 3D
Perspective in pixels decides whether the flip reads like a sheet of paper or a door turning in front of you.
Flips From Workflows
Flip, Unflip and Toggle flip actions, and a trigger mode that turns hover and click off when only your logic should flip the card.
Your App Knows the Side
Three states say which face is showing, and an event fires once per side change, so conditions and workflows follow along.
In detail
Two Elements, One Card
- Turns any two elements you already built into the front and back of the same card: two groups, two images, two buttons
- Points at them by element ID: the two sides sit inside the same parent, one on top of the other, and that parent is what turns
- Each side can be a whole group with a form inside, or something as simple as a button
Flip Control
- Three trigger modes: on hover, on click, or workflow only, when the card should turn from your own logic
- Six directions, including two spins
- Duration in milliseconds, dynamic, so it can come from the database or change per screen
- Six easing curves, including an overshoot that goes a little past the other side and settles back
- Perspective in pixels, which decides whether the flip reads like a sheet of paper or a door turning in front of you
- Starts on either side, from a dynamic value, and the starting side is applied without animation
Workflow Friendly
- Flip, Unflip and Toggle flip actions, so any workflow can turn the card
- Is flipped, is front visible and is back visible exposed for your conditions
- Is flipped event, fired once per side change and never on a reconfiguration
- No external libraries, and no workflow required for the basic flip
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 two sides
Place the two elements inside the same parent, one on top of the other, and set an ID for each one. They can be groups, images, buttons or anything else: the plugin flips the parent they share.
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 IDs and set the plugin properties as desired
In the plugin element, provide the IDs assigned to the two sides (in step 2) and set the other plugin properties according to your needs. To flip the card from a workflow, use the Flip, Unflip and Toggle flip actions, and read the exposed states to know which side is showing.
TARGET ELEMENTS 2
Front element ID
ID of the element that shows on the front of the card.
The plugin flips the PARENT of the front element, so the two sides must be siblings inside it. That parent is what carries the 3D, and it is also where a shadow should go if you want one.
An ID that does not exist on the page stops the effect and writes a warning in the browser console, instead of breaking the rest of the page.
Back element ID
ID of the element that shows on the back of the card.
FLIP 5
Trigger mode
Sets what makes the card flip. With workflow, hover and click do nothing and the card only flips through the actions.
With Trigger mode on workflow, hover and click do nothing and the actions are the only way to turn the card. It is the mode for flipping after a save or a search.
Direction
Sets the direction of the flip.
Duration
How long the flip takes, in milliseconds. Falls back to 600 when empty.
Easing
Sets the acceleration curve of the flip. Overshoot goes a little past the other side and settles back.
Overshoot is the closest a single transition gets to an elastic feel: the card goes a little past the other side and settles back. A true elastic, with several diminishing bounces, needs keyframes and is not available here.
Perspective
Distance in pixels between the viewer and the card, which sets how deep the 3D looks. Lower is more dramatic. Falls back to 1000 when empty.
Think of it as how far the viewer is from the card. 400 is dramatic, 1000 is the default middle ground, 2000 is almost flat. Empty falls back to 1000.
DEFAULT DATA 1
Default value
Side the card starts on, applied without animation. Yes starts on the back, no starts on the front.
Applied without animation, so a card that starts on the back simply appears that way instead of spinning on page load. It takes a dynamic value, so inside a repeating group each card can start on its own side.
States 3
Values the element exposes for the rest of the page to read.
is flipped
Evaluates whether the card is showing its back side (yes/no).
is front visible
Evaluates whether the front side is the one facing the person (yes/no).
is back visible
Evaluates whether the back side is the one facing the person (yes/no).
Events 1
Where a workflow can start.
is flipped
Event that can be triggered when the card is flipped or unflipped. Read the is flipped state to know which side it landed on.
Actions 3
What a workflow can tell the element to do.
Flip no params
Shows the back side of the card.
Unflip no params
Shows the front side of the card.
Toggle flip no params
Flips the card to the other side, whichever it is showing.
FAQ 9
What do I need to set up before using the plugin?
Two elements inside the same parent, stacked one over the other, each with its own ID Attribute. The plugin does the rest: it wraps that parent in a 3D environment and flips it. You do not need to position the back side or hide either one.
Do both sides need to be the same size?
They should be, because the card keeps the size of the parent group while it turns. Sides of different sizes still flip, but the smaller one leaves empty space around it on its half of the animation.
Does it have to be two groups?
No. The plugin reads the two elements by ID and flips their shared parent, so what they are does not matter: two groups, two images, two buttons, a group on one side and an image on the other. Groups are simply what most cards need, because a card usually holds more than one thing.
Can each side hold more than one element?
Yes, when each side is a group. A group holds whatever a group holds: texts, images, inputs, repeating groups, a whole form.
Can I flip the card from a workflow?
Yes. The Flip, Unflip and Toggle flip actions turn the card from any workflow, and they work in all three trigger modes. Set Trigger mode to workflow when hover and click should do nothing and only your logic decides.
How do I know which side is showing?
Three exposed states: is flipped, is front visible and is back visible. They come from the same reading, so they never disagree. The is flipped event fires once each time the card changes sides, and does not fire when you change a property.
Can the card start already flipped?
Yes. Default value starts the card on the back, and it takes a dynamic value, so each card in a repeating group can start on its own side. The starting side is applied without animation, so nothing spins by itself when the page loads.
What does Perspective change?
The distance between the viewer and the card, in pixels. Lower values make the movement dramatic, as if the card were close to your face; higher values flatten it. The default of 1000 is a middle ground that suits most cards.
Does it work on mobile devices?
Yes. The flip is CSS, which every current mobile browser renders with hardware acceleration. On touch, on hover reacts to the first tap, so on click is usually the better choice for phones.
Breaking changes 4
1.4.0 2026-10-14
The property panel was standardized and the option values changed. The card keeps working after the update, but the three dropdowns need to be set again, because the old values no longer exist in the lists.
- Interaction Type became Trigger mode, and its values are now lowercase: on hover, on click and the new workflow.Open the element and pick the value again. Until you do, the card falls back to on hover.
- Direction keeps its name, but the values are lowercase: top to bottom, bottom to top, left to right, right to left, spin right and spin left.Pick the direction again. Until you do, the card falls back to top to bottom.
- Speed became Duration, a number in milliseconds instead of a list of nine labels. The two extremes, Extremely Fast and Extremely Slow, no longer exist.Type the duration in milliseconds. The previous labels map to 400 for very fast, 600 for fast, 1000 for moderate and 1600 for very slow.
- Front Side ID and Back Side ID became Front element ID and Back element ID.Nothing to do. The IDs you already typed are kept.
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.