All Plugins
Animate - Click & Hover Animations
Free
This plugin allows you to add more than 60 CSS animations to Bubble elements such as groups, texts, shapes, images and more!
About
[center][h1][b]OVER 60+ ANIMATIONS AVAILABLE.[/b][/h1][/center] This plugin allows you to add more than 60 CSS animations to [b]Bubble elements such as groups, texts, shapes, images and more![/b] Easy to use via Actions in the Workflow. [b]Can either trigger an animation within a workflow or set a recurring animation on an element.[/b] Just set the element ID and animate it! [b][u]Hover and Click actions also included!![/u][/b] [ml][ul][li indent=0 align=left][b]Demo:[/b] [u][color=rgb(0, 102, 204)]https://plugins.datamaticsoftware.com/animate[/color][/u][/li][li indent=0 align=left][b]Documentation:[/b] [u][color=rgb(0, 102, 204)]https://plugins.gongora.me/documentation?plugin=animate[/color][/u][/li][/ul][/ml]
Setup Instructions
This are step-by-step instructions on how to get the plugin working on any Bubble App.
[ml][ol][li indent=0 align=left]Add this plugin to your application.[/li][li indent=0 align=left]Add a Workflow action, for example 'When page is loaded'.[/li][li indent=0 align=left]Search in the actions for 'Animate'.[/li][li indent=0 align=left]Go to Settings, then go to General -> General Appearance and check the option Expose the option to add an ID attribute to HTML elements.[/li][li indent=0 align=left]Go to the Design tab and select any element. Scroll to the bottom of the Property Editor and define an ID (for example animate_1).[/li][li indent=0 align=left]Go back to Workflow tab and write the ID you just defined in the Animate action, under the Element ID property.[/li][li indent=0 align=left]Choose any of the following animations for the Animation property:[/li][/ol][/ml][ml][ul][ul data=1][li indent=1 align=left]bounce[/li][li indent=1 align=left]flash[/li][li indent=1 align=left]pulse[/li][li indent=1 align=left]rubberBand[/li][li indent=1 align=left]shakeX[/li][li indent=1 align=left]shakeY[/li][li indent=1 align=left]headShake[/li][li indent=1 align=left]swing[/li][li indent=1 align=left]tada[/li][li indent=1 align=left]wobble[/li][li indent=1 align=left]jello[/li][li indent=1 align=left]heartBeat[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]backInDown[/li][li indent=1 align=left]backInLeft[/li][li indent=1 align=left]backInRight[/li][li indent=1 align=left]backInUp[/li][li indent=1 align=left]backOutDown[/li][li indent=1 align=left]backOutLeft[/li][li indent=1 align=left]backOutRight[/li][li indent=1 align=left]backOutUp[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]bounceIn[/li][li indent=1 align=left]bounceInDown[/li][li indent=1 align=left]bounceInLeft[/li][li indent=1 align=left]bounceInRight[/li][li indent=1 align=left]bounceInUp[/li][li indent=1 align=left]bounceOut[/li][li indent=1 align=left]bounceOutDown[/li][li indent=1 align=left]bounceOutLeft[/li][li indent=1 align=left]bounceOutRight[/li][li indent=1 align=left]bounceOutUp[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]fadeIn[/li][li indent=1 align=left]fadeInDown[/li][li indent=1 align=left]fadeInDownBig[/li][li indent=1 align=left]fadeInLeft[/li][li indent=1 align=left]fadeInLeftBig[/li][li indent=1 align=left]fadeInRight[/li][li indent=1 align=left]fadeInRightBig[/li][li indent=1 align=left]fadeInUp[/li][li indent=1 align=left]fadeInUpBig[/li][li indent=1 align=left]fadeInTopLeft[/li][li indent=1 align=left]fadeInTopRight[/li][li indent=1 align=left]fadeInBottomLeft[/li][li indent=1 align=left]fadeInBottomRight[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]fadeOut[/li][li indent=1 align=left]fadeOutDown[/li][li indent=1 align=left]fadeOutDownBig[/li][li indent=1 align=left]fadeOutLeft[/li][li indent=1 align=left]fadeOutLeftBig[/li][li indent=1 align=left]fadeOutRight[/li][li indent=1 align=left]fadeOutRightBig[/li][li indent=1 align=left]fadeOutUp[/li][li indent=1 align=left]fadeOutUpBig[/li][li indent=1 align=left]fadeOutTopLeft[/li][li indent=1 align=left]fadeOutTopRight[/li][li indent=1 align=left]fadeOutBottomRight[/li][li indent=1 align=left]fadeOutBottomLeft[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]flip[/li][li indent=1 align=left]flipInX[/li][li indent=1 align=left]flipInY[/li][li indent=1 align=left]flipOutX[/li][li indent=1 align=left]flipOutY[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]lightSpeedInRight[/li][li indent=1 align=left]lightSpeedInLeft[/li][li indent=1 align=left]lightSpeedOutRight[/li][li indent=1 align=left]lightSpeedOutLeft[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]rotateIn[/li][li indent=1 align=left]rotateInDownLeft[/li][li indent=1 align=left]rotateInDownRight[/li][li indent=1 align=left]rotateInUpLeft[/li][li indent=1 align=left]rotateInUpRight[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]rotateOut[/li][li indent=1 align=left]rotateOutDownLeft[/li][li indent=1 align=left]rotateOutDownRight[/li][li indent=1 align=left]rotateOutUpLeft[/li][li indent=1 align=left]rotateOutUpRight[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]hinge[/li][li indent=1 align=left]jackInTheBox[/li][li indent=1 align=left]rollIn[/li][li indent=1 align=left]rollOut[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]zoomIn[/li][li indent=1 align=left]zoomInDown[/li][li indent=1 align=left]zoomInLeft[/li][li indent=1 align=left]zoomInRight[/li][li indent=1 align=left]zoomInUp[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]zoomOut[/li][li indent=1 align=left]zoomOutDown[/li][li indent=1 align=left]zoomOutLeft[/li][li indent=1 align=left]zoomOutRight[/li][li indent=1 align=left]zoomOutUp[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]slideInDown[/li][li indent=1 align=left]slideInLeft[/li][li indent=1 align=left]slideInRight[/li][li indent=1 align=left]slideInUp[/li][/ul][/ul][/ml] [ml][ul][ul data=1][li indent=1 align=left]slideOutDown[/li][li indent=1 align=left]slideOutLeft[/li][li indent=1 align=left]slideOutRight[/li][li indent=1 align=left]slideOutUp[/li][/ul][/ul][/ml] [indent data=1]8. Select if you want the animation to occur on user hover or on user click.[/indent]
Full Documentation
[b]Animate[/b] is the only action given in this plugin. You need to call the action in the Workflow to animate any given element by ID.
This action contains the following properties to be used:
[ml][ul][li indent=0 align=left][b]Element ID:[/b] The defined ID of a Bubble element. To be able to add an ID to the element you will first need to expose the option in Settings -> General -> General Appearance.[/li][/ul][/ml][quote][color=rgb(136, 136, 136)]Please notice, even though in the Demo all elements have the same ID, this is a really bad practice as explained by [/color][color=rgb(102, 163, 224)][url=https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id][u]Mozilla[/u][/url][/color][color=rgb(136, 136, 136)]: "The id global attribute defines an identifier (ID) which must be unique in the whole document." [/color][/quote] [ml][ul][li indent=0 align=left][b]Animation:[/b] This field accepts strings and is the code of the animation that will take place (animation codes are case-sensitive). You can find the list of all the animations in the Demo or in the Setup section below.[/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]On Hover:[/b] True or False field that defines whether the animation should take place on user hover. [i]Default is no.[/i][/li][/ul][/ml] [ml][ul][li indent=0 align=left][b]On Click:[/b] True or False field that defines whether the animation should take place on user click. [i]Default is no.[/i][/li][/ul][/ml][quote][color=rgb(136, 136, 136)]Please notive, even though animations are welcome in any website and attract the user's attention, excesive animations are considered bad practice and can distract the user[/color].[/quote]