Demo Backend:
https://bubble.io/page?name=index&id=animated-gradient-bg&tab=tabs-1

Demo Frontend:

https://animated-gradient-bg.bubbleapps.io/version-test

Instructions:

1. Adding the Plugin to Your Element:
  - In the Bubble editor, select the group element where you want to apply the animated gradient background.
  - In the element's properties panel, find the "Plugins" section.
  - Add the "Animated Gradient Background" plugin to the page.

2. Configuring the Gradient:
  - Color Selection:
    • Set "Color 1" to your first gradient color.
    • Set "Color 2" to your second gradient color.
    • Optionally, set "Color 3" and "Color 4" for more complex gradients.
    • Leave color fields empty if you want fewer than four colors.

  - Animation Direction:
    • Choose from: "Left to Right", "Right to Left", "Top to Bottom", "Bottom to Top", "Diagonal (Top-Left to Bottom-Right)", or "Diagonal (Top-Right to Bottom-Left)".

  - Animation Duration:
    • Set the "Animation Duration" in seconds. This determines how long one complete animation cycle takes.

3. Group ID Setting:
  - In the plugin settings, you'll see a "Group ID" field.
  - Enter the desired group's ID here.
  - You will need to ensure you have clicked in the settings of your app to expose element ID's

4. Adjusting Element Size:
  - Ensure your group element is sized appropriately to display the full gradient.
  - The gradient will scale to fit the dimensions of your group element.

5. Testing the Animation:
  - Preview your app to see the animated gradient in action.
  - Adjust colors, direction, or duration as needed for the desired effect.

6. Performance Considerations:
  - For optimal performance, use this plugin on larger, static elements rather than small, frequently changing elements.
  - If using multiple animated gradients, consider their impact on overall app performance.

7. Responsive Design:
  - The gradient will adapt to the size of its container, making it responsive by default.
  - Test your design on various screen sizes to ensure the gradient looks good across devices.

8. Combining with Other Elements:
  - You can place other elements inside the group with the animated gradient.
  - Ensure text or other elements have sufficient contrast against the gradient for readability.

9. Troubleshooting:
  - If the animation isn't visible, check that the group ID is correct and that the colors are properly set.
  - Ensure there are no conflicting background styles applied to the same element.

10. Customization Tips:
   - Experiment with different color combinations for various moods and themes.
   - Adjust the animation duration to create subtle or more dramatic effects.
   - Try different directions to complement your overall design flow.