Dynamic Card Flip
Create stunning 3D card flip animations in Bubble with simple configuration and smooth performance
0
Rating
48
Installs
v1.2.2
Version
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.
When to Use
Everything you need in a single plugin
E-commerce Product Cards
Display product image and price on the front, flip to show detailed specifications, reviews, and additional images on the back.
Team Member Profiles
Show professional headshots and names on the front, flip to reveal detailed bios, skills, contact information, and social links.
Pricing Plan Comparison
Present plan names and prices prominently on the front, flip to display comprehensive feature lists and limitations.
FAQ Sections
Display questions on the front, flip to reveal detailed answers - creating an engaging, interactive alternative to traditional accordion FAQs.
Before/After Showcases
Show before images or states on the front, flip to reveal impressive after results - perfect for design agencies, fitness apps, or service providers.
Educational Flashcards
Create interactive learning experiences with questions or vocabulary on the front and answers or definitions on the back.
Portfolio Project Previews
Display project thumbnails on the front, flip to show project details, technologies used, and case study highlights.
Interactive Calculators
Show a teaser or preview on the front, flip to reveal interactive calculators, quote forms, or configuration tools.
Benefits
Everything you need in a single plugin
Save Screen Space
Display twice the content in the same area by hiding secondary information behind a flip animation.
Increase Engagement
Interactive elements capture user attention and encourage exploration of your content.
Professional Appearance
Smooth 3D animations give your app a polished, modern feel that stands out.
Design Freedom
You control the visual design - the plugin only handles the flip animation and positioning.
Performance Optimized
Uses CSS 3D transforms for hardware-accelerated animations that don't slow down your app.
Mobile Responsive
Works perfectly on all devices with touch-optimized interactions and smooth animations.
Easy Implementation
No complex setup or coding - just set element IDs and add a workflow action.
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
Simple Configuration
- 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)
Smooth 3D Animation
- 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
Flexible Workflow Integration
- 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
Automatic Positioning
- Plugin automatically wraps and positions front/back elements
- Maintains original element dimensions
- Handles backface visibility for clean transitions
- Preserves existing element styling
Independent Cards
- 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
Cross-Device Support
- Works on desktop browsers
- Fully functional on mobile devices
- Touch-friendly interaction
- Responsive behavior maintained
Common Questions
Everything you need to know before installing
How do I set element IDs?
Select your element, look for the gray inspector panel on the left side of the Bubble editor, and find the ID Attribute field. Enter your chosen ID (like front-card or back-card). This ID is what you'll reference in the Dynamic Card Flip element properties.
Can I flip multiple cards on the same page?
Yes! Add multiple Dynamic Card Flip elements and give each pair of cards unique IDs. For example: Card 1 uses front-1 and back-1, Card 2 uses front-2 and back-2. Each card will flip independently.
Do both cards need to be the same size?
Yes, for the best visual result, the front and back elements should have identical dimensions. Set explicit width and height values rather than using fit to content to ensure consistent sizing.
Can I customize the flip animation speed?
The animation duration is currently fixed at 0.6 seconds, which is the industry standard for smooth, natural-feeling flip animations. This timing has been optimized for the best user experience.
What elements can I use as cards?
Any Bubble element that can have an ID Attribute can be used - Groups, Containers, Images, Text elements, or even Repeating Groups. Most commonly, developers use Group elements as they provide the most flexibility for content design.
Does it work on mobile devices?
Yes, the plugin is fully responsive and works on all mobile devices. The 3D animations are hardware-accelerated for smooth performance even on lower-powered devices.
Can I flip a card automatically when the page loads?
Yes! Create a workflow with When Page is loaded as the trigger, optionally add a Pause before next action step for a delay, then add the Flip Card action. This will automatically flip the card when users arrive on the page.
What if my card isn't flipping?
Check these common issues: (1) Verify the IDs in your plugin properties exactly match the ID Attributes in the gray inspector panel, (2) Ensure both front and back elements are visible on the page, (3) Check the browser console for any error messages, (4) Confirm the Dynamic Card Flip element has loaded before triggering the flip action.
Can I trigger the flip based on a condition?
Absolutely! Use conditional workflows with Only when statements to flip cards based on user data, custom states, or any other condition available in Bubble workflows.
Is there a limit to how many cards I can have?
While there's no hard limit, performance is best with 1-12 flip cards per page. If you need more, consider using conditional visibility to show/hide card sets, or implement lazy loading for off-screen cards.