Dynamic Card Flip

Create stunning 3D card flip animations in Bubble with simple configuration and smooth performance

About Plugin

Documentation

Install

Dynamic Card Flip transforms any two elements on your Bubble page into an interactive 3D flip card. Simply assign ID Attributes to your front and back elements, configure the plugin element with those IDs, and add a workflow action to trigger the flip. The plugin automatically handles positioning, sizing, and smooth 3D animation using hardware-accelerated CSS transforms. You maintain complete design control while the plugin manages the flip mechanics.

Preview

Go to Editor

Go to Preview

When to Use

Everything you need in a single plugin

shopping_cart

E-commerce Product Cards

expand_more

Display product image and price on the front, flip to show detailed specifications, reviews, and additional images on the back.

group

Team Member Profiles

expand_more

payments

Pricing Plan Comparison

expand_more

help

FAQ Sections

expand_more

compare

Before/After Showcases

expand_more

school

Educational Flashcards

expand_more

work

Portfolio Project Previews

expand_more

calculate

Interactive Calculators

expand_more

Benefits

space_dashboard

Save Screen Space

Display twice the content in the same area by hiding secondary information behind a flip animation.

trending_up

Increase Engagement

Interactive elements capture user attention and encourage exploration of your content.

verified

Professional Appearance

Smooth 3D animations give your app a polished, modern feel that stands out.

palette

Design Freedom

You control the visual design - the plugin only handles the flip animation and positioning.

speed

Performance Optimized

Uses CSS 3D transforms for hardware-accelerated animations that don't slow down your app.

phone_android

Mobile Responsive

Works perfectly on all devices with touch-optimized interactions and smooth animations.

bolt

Easy Implementation

No complex setup or coding - just set element IDs and add a workflow action.

grid_view

Multiple Cards

Create multiple independent flip cards on the same page, each with unique content and triggers.

space_dashboard

Save Screen Space

Display twice the content in the same area by hiding secondary information behind a flip animation.

trending_up

Increase Engagement

Interactive elements capture user attention and encourage exploration of your content.

verified

Professional Appearance

Smooth 3D animations give your app a polished, modern feel that stands out.

palette

Design Freedom

You control the visual design - the plugin only handles the flip animation and positioning.

speed

Performance Optimized

Uses CSS 3D transforms for hardware-accelerated animations that don't slow down your app.

phone_android

Mobile Responsive

Works perfectly on all devices with touch-optimized interactions and smooth animations.

bolt

Easy Implementation

No complex setup or coding - just set element IDs and add a workflow action.

grid_view

Multiple Cards

Create multiple independent flip cards on the same page, each with unique content and triggers.

space_dashboard

Save Screen Space

Display twice the content in the same area by hiding secondary information behind a flip animation.

trending_up

Increase Engagement

Interactive elements capture user attention and encourage exploration of your content.

verified

Professional Appearance

Smooth 3D animations give your app a polished, modern feel that stands out.

palette

Design Freedom

You control the visual design - the plugin only handles the flip animation and positioning.

speed

Performance Optimized

Uses CSS 3D transforms for hardware-accelerated animations that don't slow down your app.

phone_android

Mobile Responsive

Works perfectly on all devices with touch-optimized interactions and smooth animations.

bolt

Easy Implementation

No complex setup or coding - just set element IDs and add a workflow action.

grid_view

Multiple Cards

Create multiple independent flip cards on the same page, each with unique content and triggers.

Key Features

Everything you need in a single plugin

settings

Simple Configuration

expand_more

Set front and back element IDs through intuitive property fields
No parameters required for the flip action
Works with any Bubble element type (groups, containers, images)

animation

Smooth 3D Animation

expand_more

Hardware-accelerated CSS transforms for optimal performance
0.6 second animation duration (industry-standard timing)
180-degree Y-axis rotation for natural flip effect
Automatic perspective and transform-style handling

account_tree

Flexible Workflow Integration

expand_more

Single Flip Card action triggers the flip animation
Can be called from any workflow event (button click, icon click, page load, custom state change)
Toggle behavior - each action flips between front and back

fit_screen

Automatic Positioning

expand_more

Plugin automatically wraps and positions front/back elements
Maintains original element dimensions
Handles backface visibility for clean transitions
Preserves existing element styling

library_add

Independent Cards

expand_more

Add multiple Dynamic Card Flip elements for multiple cards
Each card operates independently with unique IDs
No interference between different flip cards on the same page

devices

Cross-Device Support

expand_more

Works on desktop browsers
Fully functional on mobile devices
Touch-friendly interaction
Responsive behavior maintained

Documentation

FAQ

Common questions

helpHow do I set element IDs?

helpCan I flip multiple cards on the same page?

helpDo both cards need to be the same size?

helpCan I customize the flip animation speed?

helpWhat elements can I use as cards?

helpDoes it work on mobile devices?

helpCan I flip a card automatically when the page loads?

helpWhat if my card isn't flipping?

helpCan I trigger the flip based on a condition?

helpIs there a limit to how many cards I can have?

Contato