🚀 GS Animate CSS Plugin: How-To Use Guide
This guide details how to use the primary action, Animate_id_attribute, within your Bubble application to apply engaging CSS animations to any element.

Action Overview

The Animate_id_attribute action takes two required inputs:
id_attribute: The unique ID attribute of the element you wish to animate.
Type of animation: The specific CSS animation effect to apply.


Step 1: Set the ID Attribute on Your Target Element

Before using the action, you must assign a unique ID Attribute to the Bubble element you want to animate.
Enable ID Attributes: If you haven't already, go to your app's Settings tab $\rightarrow$ General $\rightarrow$ Expose the option to add an ID attribute to HTML elements. Check this box.
Select Element: Click on the element you want to animate (e.g., a Button, a Group, an Image).
Find ID Field: In the element's property editor, locate the ID Attribute field (it's usually at the bottom of the "Appearance" tab).
Assign ID: Enter a unique and descriptive ID in this field.
Example: If you want to animate a button that submits a form, you might set its ID Attribute to

submit-button
.
Step 2: Implement the Animate_id_attribute Action in a Workflow

You will trigger the animation using a Bubble workflow, typically after a user interaction (like a button click) or a page load event.
Start a Workflow: Create or open a relevant workflow (e.g., "When Button 'Animate' is clicked").
Add Action: Click Add an action... $\rightarrow$ Plugins $\rightarrow$ GS Animate CSS - Animate_id_attribute.
Set Inputs: Configure the two required fields:

id_attribute:

Description: The exact ID you set on the target element in Step 1.
Your Input Example:

submit-button
Type of animation:

Description: Select one of the available animation types from the dropdown.
Your Input Example:

bounce


Available Animation Types

The following animation types are available for the Type of animation input:
bounce
flash
pulse
rubberBand
shakeX
Tip: You can set up different workflow conditions to apply different animations based on user actions or data states (e.g., animate with

shakeX
if a form submission fails).