Link to the plugin page: https://zeroqode.com/plugin/css-animations-plugin-for-bubble-1739737461831x888658041485783000
Demo to preview the plugin:
Live Demo: https://pluginsrapidev.bubbleapps.io/css
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.
How to setup
- Enable ID Attributes
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”
- Add the Element to the Page
- Recurring Animation – use this element to apply an animation continuously at regular intervals.
- Animation – use this element to trigger an animation once, either on page load or via workflow.
In the Design tab of your Bubble editor, search for the plugin elements:
- Configure the Element Properties
- Element ID: The ID of the element you want to animate (e.g.,
btn-save). - 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.,
1000to repeat every second). - 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.
Recurring Animation
This element applies a CSS animation repeatedly to another element identified by its ID.
Make sure the target element has this exact ID set in its ID Attribute field.
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.
To use it:
Plugin 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 Actions
- Trigger - Trigger an effect on an element
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 |
