Implement Javascript code

Hello!

I’m trying to show a Confetti animation effect covering an entire screen. I found this Javascript code and try to apply it in my app.
https://codepen.io/jonathanbell/pen/OvYVYw#code-area

I installed Toolbox and followed the basic instructions but it’s not working yet… Can anyone tell if I’m missing anything?

  • In code there are 3 functions. So I’ve added ‘bubble_fn_a(function1())’, ‘bubble_fn_b(function2())’, ‘bubble_fn_c(function3())’. and ‘Run the JS’ workflow when Page is Loaded.
  • Use ‘JavascriptToBubble’ element and called 3 functions a,b and c.
  • Use a text UI element to visualize the result.
    Screen Shot 2020-12-28 at 17.20.46
  • I coped the HTML code from Codepen in the Header.

But there’s no sign of confetti…

Best,
Ohyoon

Hey @ohyoonkwn,

You can simplify this with a single Run Javascript on page load.
image

Here’s a quick example from that codpen.
Preview: https://confetti-css.bubbleapps.io/version-test
Editor: Confetti-css | Bubble Editor

Just copy the Run Javascript action to your app and you should be good to go!

Cheers,

Eli :slight_smile:

4 Likes

Amazing! @eli! What did you do? It would be great to learn how to do that.

Actually my app is a dark style, so I need to apply the background color. As the effect is supposed to run behind the other elements, I need to add background color in this script. I’ve added background-color: #1D2025;in canvas{} but it’s not getting applied. In fact, when I delete the whole canvas style, it seems nothing affected. As the background color thing works in the codepen I’m a bit puzzled…

@ohyoonkwn, you’re right, the CSS was not impacting the element. You can replace the code at the top with this (or copy-paste from the editor). This will add the background inline and seems to be working properly.

$('body').prepend('<canvas id="canvas"></canvas>')

$('canvas').css({
        "background-color": "#1D2025"
});

Hi there, pretty amazing effect and use of custom css. How would you make the code for the effect only apply to a popup and not full viewport?

cheers !

Hey @lucas.ar,

Interesting scenario but it’s a matter of applying the effect to the popup element. I’ve adjusted the code slightly to demonstrate. I added an html Id of ‘popupConfetti’ to the popup.

Preview: https://confetti-css.bubbleapps.io/version-test/popup-confetti
Editor: https://bubble.io/page?type=page&name=popup-confetti&id=confetti-css&tab=tabs-2

1 Like

Haha I actually did this in an app recently…
I’ll have a look, I called it confetti_surprise

This topic was automatically closed after 70 days. New replies are no longer allowed.