Flip Elements 3D v1.4.0

Newed UIBreaking changes

Flip Elements 3D turns any two elements into the front and back of the same card, with a real 3D flip between them. Point the plugin at the two element IDs, choose what triggers the flip, and drive it from your workflows whenever the card should turn on its own.

No data collected This plugin does not collect user data.

Live demoGet plugin

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

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.

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

Reliable & Production-Ready

  • Built with lightweight CSS and JavaScript for fast, reliable performance
  • No external libraries, and no workflow required for the basic flip
  • Designed around practical use cases and real Bubble development needs
  • Tested in real-world applications before being released publicly

How to use 4

  1. 01
    Stack the two sides and give each one an ID

    The two elements must sit inside the same parent, one on top of the other, each with its own ID Attribute in the Bubble editor. Groups are the usual choice, but any element works.

    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.

  2. 02
    Place the element and point it at the two IDs

    Drop Flip Elements 3D anywhere on the page, it draws nothing at runtime, and fill Front element ID and Back element ID.

    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.

  3. 03
    Choose how it flips

    Trigger mode takes on hover, on click or workflow. Direction, Duration, Easing and Perspective shape the movement, and all four start with a working default.

  4. 04
    Drive it from workflows

    Flip, Unflip and Toggle flip turn the card from any workflow. Read is flipped, is front visible and is back visible in conditions, and react to the is flipped event.

    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.

TARGET ELEMENTS 2

Front element ID

text

ID of the element that shows on the front of the card.

defaultno default

Back element ID

text

ID of the element that shows on the back of the card.

defaultno default

FLIP 5

Trigger mode

dropdown

Sets what makes the card flip. With workflow, hover and click do nothing and the card only flips through the actions.

  • on hover
  • on click
  • workflow

defaulton hover

Direction

dropdown

Sets the direction of the flip.

  • top to bottom
  • bottom to top
  • left to right
  • right to left
  • spin right
  • spin left

defaulttop to bottom

Duration

number

How long the flip takes, in milliseconds. Falls back to 600 when empty.

default600

optional

Easing

dropdown

Sets the acceleration curve of the flip. Overshoot goes a little past the other side and settles back.

  • ease
  • ease in
  • ease in out
  • ease out
  • linear
  • overshoot

defaultease

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

number

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.

default1000

optional

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

yes/no

Side the card starts on, applied without animation. Yes starts on the back, no starts on the front.

defaultno

optional

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

yes/no

Evaluates whether the card is showing its back side (yes/no).

is front visible

yes/no

Evaluates whether the front side is the one facing the person (yes/no).

is back visible

yes/no

Evaluates whether the back side is the one facing the person (yes/no).

Events 1

Where a workflow can start.

is flipped

event

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 1

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.

Newed UI - Enhancers

This plugin is part of Newed UI - Enhancers, a set of plugins that work on Bubble's own native elements instead of replacing them. Each one attaches to something already on your page, such as a group, a popup, a repeating group, a button, a text or an input, and adds behavior or styling that Bubble does not offer natively, without asking you to rebuild your layout around it. See more plugins on the GCS Studios contributor page.

Because every component is built from scratch instead of wrapping a native element, they share the same look across the library and render the same way in every browser.