Canvas Confetti help

Design help Custom code
1

Hi all,

I know zilch when it comes to embedding javascript type things and activating them on a click.

I’d love to put in a button and on click activate confetti.

If possible this confetti:

If anyone knows how to do this that would be amazing.

I’d also like the confetti to appear on the button, not just centred in the page if that makes sense.

In this live example here: Write Code, Get Confetti | CSS-Tricks - CSS-Tricks you can see on button click it activates in the centre of page, not on the button. :confused:

Thanks
Josh :slight_smile:

2

just a little bump :slight_smile:

3

hi @OvertonGraphics I have done short video about how to run confetti in WF but it is just very basic setting and you can take it from there further. feel free to download this video for later reference as I will delete it later to save my Cloud space. :wink:

1 Like
4

This was so helpful! Thanks so much, I will explore this tomorrow and get back to you.

Out of interest is there a way to have it so it only explodes once from the button itself. So not across the entire screen and not middle of screen.

For example like this here: https://primer.io/ if you click the one click payment button in ui box near top.

Thanks!
Josh

image
image762×526 27.7 KB

5

hi @OvertonGraphics here is some example how it can be done but I thing that this library is IMO not optimal to use. Better will be spend some time and create own JS to customise it to your exact needs. Anyway here we go but I didn’t spend much time on it.

Live Demo
Read Only

6

Oh wow, you hero!!

This is very exciting. I will try this out now :slight_smile:

7

Happy to help @OvertonGraphics, if you do not have any further questions related to this topic feel free to close this issue.

8

Will shout when i’ve had a chance to experiment :slight_smile: should be today

Thanks again!

1 Like
9

@Stan thanks so much!! I got it working and it’s perfect. hugely appreciate all your help! https://usecomma.com/test

Thanks
Josh

1 Like
10

@OvertonGraphics Awesome work. Can you share a read-only for that?

11

Yep @joejola :slight_smile: https://preview.webflow.com/preview/comma-2021?utm_medium=preview_link&utm_source=dashboard&utm_content=comma-2021&preview=c54315d51204f6833d9af43b29b52e2d&workflow=preview