Opacity - set dynamically

Hello all,
Thanks for the Opacity feature. Great idea.

What I would like even more is to be able to set that opacity based on conditions and set the opacity level (0 to 100) using dynamic data.

Here’s an example:
In my golf App, I record where the user hits is Drives accuracy for each golf hole (5 possible values: Too Strong, Too Short, On Target, Right or Left).
When the user plays a same golf course regularly, this data is averaged for each hole., rendenring a number between 0 and 100 for each possible values as listed above.
Then, when the golfer plays a game, I show a graphic like this one below:

The five dark purple squares (shapes) are for the five possible values.
I would like to change the opacity of each square based on a dynamically calculated value.
So, if my calculated values would be for example: Too Strong=10, Right=60, Too Short = 0, Left = 20 and On target = 10, I would have the resulting graphic like the one below:

You can’t insert the opacity dynamically. Instead you insert one shape with 5 conditionals and change the opacity for each. Then you change this shape to a reusable element and copy and paste the shape in the five spots you need.

Screen Shot 2023-04-03 at 5.50.03 PM

Thanks @ezduriez
That is not what I would like to do.

See, the value of the opacity is calculated on every golf hole the player has played.
I do this for my calculation:
Count the number of holes where the Direction of a Drive Hit is Too Strong.
Divive that value by the number of recorded number of times this golf hole has been played.
For example: I have played that save golf hole, at the same golf course 10 times.
I have hit too Strong 3 times on that hole. That gives me .3 (or 30 %).
Then, dynamically, I would like to set the Opacity for the Shape I called TooStrong to 30%.

Thanks again.
From up North, Ottawa, Canada.

Hey @guygreen63

Saw your post, and thought this might be a handy workaround maybe:
Opacity CSS dynamic overrides?

1 Like

Wow @luke2 !
I am so thankfull. Exactly what I was looking for!.


Your welcome, glad it could be of use Guy

Tell me where I can send you coffee!

Well, that’s much appreciated Guy! coffee funds

I Luke’s solution, but something that just popped into my head, would you be able to just set the opacity on the colour, if all you have is a coloured square you could just do dynamic colour hex value, and you don’t have to do any CSS override.

hex takes opacity value #000000 = black. #00000050 = black at 50%

So you could have an option that is your colour, then do append… and do whatever you want on that to have it dynamically change your opacity value based on some calculation you’re doing for the hole thingy.

Using a dynamic HEX code can work very similarly, the issue with this method is that its probably not quite as clean. For instance, it means managing the HEX codes which are not always easy to gauge the color palette or tone. Where as with the opacity, we know that its color/background is already set on the element whether its via a style, dynamic or static custom style.

Good point though and a nice alternative method. As usual with Bubble, one way to do many things…

It was just something that popped into my head, so you’re most likely right that it’s not an optimal idea. I just saw the white background in the example above, so figured hex opacity vs. the CSS opacity attribute wouldn’t be much of an issue in this case.

You wouldn’t have to manage the hex code at all I reckon. If you have an option set with your hex value, which is probably preferred anyway if you’re not using the new fancy style tab (which is pretty bad), then you do “option_set’s_hex_value:append:calculated_value”. so you only have one hex value stored as an option set, and when you update that in your option set, it will magically work, making it very easy to work with.

HOWEVER, you’ll still have a difference in opacity between bubble element opacity and hex opacity, but on white… it’s a meh :slight_smile:


I found a solution. No CSS needed.

You can create a database for the opacity codes. Insert this data code from 0% til 100% by hand just once with the corresponding opacity code listed in the link below. Add an average field for the user.

In the shape you choose the main color (#FF0000 just an example) and in the conditional you insert this:

In the search opacitys insert this:
Screen Shot 2023-04-04 at 5.19.23 PM

Result 1 with 60% Accuracy/Opacity
Screen Shot 2023-04-04 at 5.23.55 PM

Result 2 with 30% Accuracy/Opacity
Screen Shot 2023-04-04 at 5.26.43 PM

Check each code in the link below.

Please let me know if worked! Good Luck!

Hello Luke!

I have implemented the HTML approach to change the values for opacity for my five shapes.

However, I can see that the values are calculating correctly, but my shape opacity values are not taking the percentages given by the HTML.

Could it be that this would only run in live mode?


Hey @guygreen63

Hmm, should be functional for any branch, whether its test or live. Have you got the !important at the end of each property, so that it can override the default set by Bubble? Might be worth trying rather than on an HTML element level, but rather the page level, though this depends if you are using a reusable element to handle.

If not post back here the setup or PM the app I’m happy to double-check your setup.


Thanks @luke2
I moved the HTML at the page level.
What I did (see more images below for setup), is I have 5 input fields to calculate the percentages of OnTarget, TooStrong, Right, TooShort, Left for the ball direction the user enters. I show those fields on the screen now for testing purposes.

Here’s the HTML object setup:

The Shapes are all set like this one:


You can see here that I have 50% for both Right and Left values. So the expectation would be that the shapes show an opacity of 50% and what I see is they show at 100%.

I did check the HTML option in Settings.

Thanks for your time.
Much Appreciated.
Guy from Canada!

Thanks for the screens.

So I’m not quite sure, as you didn’t attach fully the shape elements, but does each shape element have the relevant id e.g. overshot1

Additionally, for the inputs values that are used in the HTML, these values need to be rendered as the right number format e.g. 0.1 (outputs 10% opacity) or 0.5
You may need to factor in a division mechanism.

Hopefully this helps in identifying the issue, if not, maybe you can PM me the frontend page to view and I can check the source code.