Dynamic Card Flip

46

Free

Add 3D flip animations to cards, images, and sections in Bubble — create modern, interactive interfaces with smooth spins, customizable triggers, and full control over speed, direction, and angle.

Add 3D flip animations to cards, images, and sections in Bubble — create modern, interactive interfaces with smooth spins, customizable triggers, and full control over speed, direction, and angle.

Editor

Editor

Editor

Editor

Preview

Preview

Preview

Preview

Get in touch

Get in touch

Get in touch

Get in touch

Overview The Nebula – Dynamic Card Flip adds elegant, realistic 3D flip animations to any Bubble element, turning components into interactive cards with dynamic flip effects. Ideal for engaging interfaces, product showcases, and quizzes. How It Works

  • Two elements: create a front card and a back card.

  • Unique IDs: assign IDs for each element (e.g., front_card, back_card).

  • Plugin configuration: enter those IDs in the plugin fields.

  • Triggers: choose interaction type — click, hover, or workflow.

  • Flip styles: horizontal, vertical, fade, or slide.

When to Use

  • Product cards and interactive showcases.

  • Quizzes and educational flashcards.

  • Dynamic content presentations.

  • Interfaces that require real-time visual feedback.

Benefits

  • Smooth, realistic 3D animations.

  • Fully customizable (speed, angle, perspective).

  • Works with dynamic content and Repeating Groups.

  • Flexible triggers (click, hover, workflow).

  • Lightweight design optimized for performance.

Key Features

  • 3D flip with direction and depth control.

  • Responsive, fluid animations.

  • Compatible with dynamic layouts and interactive content.

  • Perfect for modern UI experiences and gamified interfaces.

Installation

  • In the Bubble editor, go to Plugins → Add plugins and install Nebula – Dynamic Card Flip.

  • Add the plugin element to the page and configure the card IDs.

Configuration

  • Front Card ID: ID of the front card (e.g., front_card).

  • Back Card ID: ID of the back card (e.g., back_card).

  • Trigger Type: set whether the flip is triggered by click, hover, or workflow.

  • Animation Style: select the style (horizontal, vertical, fade, or slide).

  • Animation Speed: adjust transition duration (in ms).

  • Perspective / Angle: configure depth and rotation angle for the 3D effect.

Best Practices

  • Avoid overlapping elements inside the same flip container.

  • Test animations across resolutions to ensure smoothness.

  • Use optimized images (light compression) for better performance.

  • Use workflows for conditional flips (e.g., "show answer" in quizzes).

Troubleshooting

  • Flip not occurring: verify front/back IDs are correct and that the plugin element is on the page.

  • Visual misalignment: ensure front and back elements share identical dimensions.

  • Animation is slow: reduce transition duration or simplify effects.

Compatibility

  • Compatible with Bubble’s Responsive Engine.

  • Works on desktop and mobile.

  • Supports Repeating Groups and dynamic content.

Support

Contato

Contato