Newed UI - Enhancers

Flip Elements 3D v1.3.0

Flip Elements 3D turns any two groups 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 how the flip is triggered, and the effect works without a single workflow.

No data collected This plugin does not collect user data.

Live demoGet plugin

The documentation and the examples for this plugin are being updated. Open the current documentation

Key features 6

Two Groups, One Card

Any two native Bubble groups become the front and the back of the same card, flipping in 3D.

Interaction and Direction

Choose how the flip is triggered and which way it turns, so the motion matches the rest of the page.

Speed Control

Adjust how fast the flip runs, from a quick reveal to a slower, more deliberate turn.

Works With Your Layout

The plugin points at two IDs. Nothing in your design has to be rebuilt to use it.

No Workflow Required

The effect runs on its own once the IDs are set. No workflow, no custom code.

Desktop and Mobile

The same flip works across screen sizes, with no separate setup for each.

In detail

  • Turns any two native Bubble groups into the two sides of a 3D flip
  • Choice of interaction type, so the flip can follow the behavior your page needs
  • Control over flip direction and speed
  • Works with the elements you already built, with no change to your layout
  • No external libraries and no workflow required

Fields 5

Front Side ID

text

Front side element ID.

defaultno default

Back Side ID

text

Back side element ID.

defaultno default

Interaction Type

dropdown

Sets the interaction type that will perform the flip effect.

  • On Hover
  • On Click

defaultOn Hover

Direction

dropdown

Sets the direction of the flip effect.

  • Top to Bottom
  • Bottom to Top
  • Left to Right
  • Right to Left
  • Spin Right
  • Spin Left

defaultTop to Bottom

Speed

dropdown

Sets the speed of the flip effect.

  • Extremely Fast
  • Very Fast
  • Fast
  • Slightly Fast
  • Moderate
  • Slightly Slow
  • Slow
  • Very Slow
  • Extremely Slow

defaultFast

FAQ 5

What do I need to set up before using the plugin?

Enable the option that exposes element IDs in Bubble, under Settings > General > Advanced options, checking "Expose the option to add an ID attribute to HTML elements". After that you only need to assign an ID to the element or group that will be the front and another to the one that will be the back.

Do both sides need to be the same size?

It is strongly recommended. Place the two sides inside a group with the "Aligned to parent" layout, let that group define the width and height, and keep both sides centered and with the same dimensions, or filling the whole space of that group. Sides with different sizes still flip, but the result looks misaligned mid-turn.

Can each side hold more than one element?

Yes. Each side can be a single element or a group with as many elements inside as your design needs. What the plugin needs is one ID for the front and one for the back.

Does it require a workflow?

No. Once the two IDs and the settings are in place, the flip works on its own. No workflow and no custom code.

Does it work on mobile devices?

Yes. The effect is responsive and works on both desktop and mobile, with no separate configuration for each.