Animated Gradient Backgrounds • New Plugin

Showcase
1

Hi! Here is a new plugin called Animated Gradient Backgrounds.

There are two elements to the plugin: Animated Gradient and Interactive Gradient.

Animated Gradient allows you to animate your page’s background between up to 4 customizable gradients. This is great for making a page feel more dynamic.

Interactive Gradient allows you to transition between gradients using element actions. Also fully customizable. This element (and its actions) are where the plugin really gets good. Use the element actions to trigger animated transitions when a user clicks a button, when information changes, based on time of day, etc. When combined with Bubble’s powerful workflows, you can really add a new layer of dynamics to your Bubble app.

Plugin Page:

Live Demo:
https://kwilliamsplugins.bubbleapps.io/animated-gradient

Screenshot of Property Editor:

screenshot
screenshot680×1608 65.2 KB

6 Likes
2

How can I lighter the red in the animate gradient?
I tried this, but still get a lot of red. :slight_smile:

07%20AM

19%20AM
19%20AM540×1152 42.3 KB
30%20AM
30%20AM590×662 46.7 KB

1 Like
3

Hey John, I’m taking a look at this now but so far I’ve been unable to reproduce the problem. Can you send me a link to your app so I can take a look at the generated HTML? An empty page that’s showing the problem will work, but the more info you can provide, the better.

And sorry about the issue; I will make sure we get this resolved!

1 Like
4

For a strange reason, the red color appeared again in the setting, so I change it. Maybe Bubble defect effect :slight_smile: Work now as expected. Thanks. Great plugin.

1 Like
5

Great! Please don’t hesitate to let me know if you encounter any further issues.

6

Hi @kyle.b.williams

I’m trying to shut the animated gradient background effect after 15 seconds, but can’t find the place to do so. The principal reason it’s taken too much cpu ressource on some old machine or old phone (cpu at 99%). Maybe add an option in state to animate: disable ? Just an idea.

42%20PM

1 Like
7

Hi @JohnMark,

A new version of the plugin is now available. It includes three new element actions:

  1. Pause - Pause playback of the gradient animation.
  2. Play - Resume playback of the gradient animation.
  3. Destroy - Destroys the instance of the gradient animation, and replaces the background image with the first gradient set up in the property editor.

I will also be revisiting the plugin later this week to see if I can make some performance improvements for older machines.

Thanks for the feedback!
-Kyle

2 Likes
8

After testing, “destroy” is the killing one :slight_smile:
Many thanks.

1 Like
9

New version available!

This version adds an input for an element’s ID attribute, so that the gradient is applied to an element on your page, rather than the body of the page. If you leave it blank, the gradient will be applied to the body of the page (as in previous versions).

Please note that version 1.2.X does not function correctly, so if you upgraded to that version, please upgrade to 1.3.0 or newer. There are no functionality-breaking changes in this version, so you are safe to upgrade from earlier versions.

Thanks all who have bought the plugin!

1 Like
10

Hi @kyle.b.williams , We had to roll back to version 1.0, due to version 1.2 and 1.3 causing a bug that hides all other elements on the page. Do you know what could be causing this?