CSS Animations (40 Plus)

Demo to preview the plugin:

Introduction

This plugin allows you to add more than 40 css animations to Bubble elements such as groups, texts, shapes, images and more!
You can either trigger an animation within a workflow or set a recurring animation on an element.
You can use this plugin to enhance the user experience of your application and make your pages more dynamic.
Image without caption

How to setup

  1. Enable ID Attributes
    1. Go to the settings page in your editor. Under the General tab click on the checkbox “Expose the option to add an ID attribute to HTML elements”
      App Settings → General Tab.
      App Settings → General Tab.
  1. Add the Element to the Page
    1. In the Design tab of your Bubble editor, search for the plugin elements:
      • Recurring Animation – use this element to apply an animation continuously at regular intervals.
        • Element → Recurring Animation.
          Element → Recurring Animation.
      • Animation – use this element to trigger an animation once, either on page load or via workflow.
        • Element → Animation.
          Element → Animation.
  1. Configure the Element Properties
    1. Recurring Animation
      This element applies a CSS animation repeatedly to another element identified by its ID.
      Element → Recurring Animation.
      Element → Recurring Animation.
      • Element ID: The ID of the element you want to animate (e.g., btn-save).
        • Make sure the target element has this exact ID set in its ID Attribute field.
      • Animation: The name of the animation class you want to apply (e.g., bounce, fadeIn, zoomIn).
      • Interval: Time between each repetition, in milliseconds (e.g., 1000 to repeat every second).
      Animation
      This element is used to apply a one-time animation on page load or trigger it via workflow.
      It has no configuration fields in the editor.
      Element → Animation.
      Element → Animation.
      To use it:
      • Set the ID Attribute on the element you want to animate.
      • Use the workflow action Trigger A Animation to animate it manually (see next section), or let it animate once on page load when the page renders.

Plugin Element Properties

Recurring Animation

Element properties → Recurring Animation.
Element properties → Recurring Animation.
Fields:
Title
Description
Type
Element ID
Specify the element ID of the element that should be targeted.
Text
Animation
Choose one of the animations. Available options: magictime magic, magictime twisterInDown, magictime twisterInUp, magictime swap, magictime puffIn, magictime puffOut, magictime vanishIn, magictime vanishOut, magictime openDownLeft, magictime openDownRight, magictime openUpLeft, magictime openUpRight, magictime openDownLeftReturn, magictime openDownRightReturn, magictime openUpLeftReturn, magictime openUpRightReturn, magictime perspectiveDown, magictime perspective Up, magictime perspectiveLeft, magictime perspectiveRight, magictime rotateDown, magictime rotateUp, magictime rotateLeft, magictime rotateRight, magictime slideDown, magictime slideUp, magictime slideLeft, magictime slideRight, magictime slideDownReturn, magictime slideUpReturn, magictime slideLeftReturn, magictime slideRightReturn, magictime swashOut, magictime swashIn, magictime foolishIn, magictime holeOut, magictime bombRightOut, magictime bombLeftOut, magictime bombRightOut, magictime bombLeftOut, magictime spaceOutUp, magictime spaceInUp, magictime spaceInDown
Dropdown
Interval
Specify the time between each animation in milliseconds.
Number

Animation

Element properties → Animation.
Element properties → Animation.

Element Actions

  1. Trigger - Trigger an effect on an element
    1. Workflow action → Trigger.
      Workflow action → Trigger.
      Title
      Description
      Type
      Element ID
      Specify the element ID of the element that should be targeted.
      Text
      Animation
      Choose the animation that should be applied Available options: magictime magic, magictime twisterInDown, magictime twisterInUp, magictime swap, magictime puffIn, magictime puffOut, magictime vanishIn, magictime vanishOut, magictime openDownLeft, magictime openDownRight, magictime openUpLeft, magictime openUpRight, magictime openDownLeftReturn, magictime openDownRightReturn, magictime openUpLeftReturn, magictime openUpRightReturn, magictime perspectiveDown, magictime perspective Up, magictime perspectiveLeft, magictime perspectiveRight, magictime rotateDown, magictime rotateUp, magictime rotateLeft, magictime rotateRight, magictime slideDown, magictime slideUp, magictime slideLeft, magictime slideRight, magictime slideDownReturn, magictime slideUpReturn, magictime slideLeftReturn, magictime slideRightReturn, magictime swashOut, magictime swashIn, magictime foolishIn, magictime holeOut, magictime bombRightOut, magictime bombLeftOut, magictime bombRightOut, magictime bombLeftOut, magictime spaceOutUp, magictime spaceInUp, magictime spaceInDown
      Dropdown
Image without caption

Changelogs