Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Confetti Opacity #188

Open
SethSmucker opened this issue Oct 8, 2022 · 4 comments
Open

Confetti Opacity #188

SethSmucker opened this issue Oct 8, 2022 · 4 comments
Labels
good first issue Good for newcomers

Comments

@SethSmucker
Copy link

It would be nice to be able to change the opacity of confetti. I've been changing ticks to make the confetti opaque for longer, but I was thinking that being able to change a variable would be a nice qol addition.

@catdad
Copy link
Owner

catdad commented Oct 24, 2022

Can you elaborate more about the effect you are trying to achieve? Do you wan the confetti to always be a singly opacity and never fade? Or just set the initial opacity? Is it for individual confetti or all confetti?

Based on some of those answers, would it be better to just use a custom canvas and set the opacity on the canvas itself, which is possible today?

@catdad catdad added the info needed Extra information is needed to address the issue label Oct 24, 2022
@SethSmucker
Copy link
Author

The Effect:

  • Confetti fades from 100% opacity to 0% opacity over some amount of time "t" which can be changed, or can be set to never fade.

My Usecase:

  • Currently, I'm using the confetti when the user clicks a button. My issue is that it fades out too soon. My goal was to make it so the confetti would make it all the way down to the bottom of the screen without fading, but currently it begins disappearing soon after it's created.

Using the canvas to change the opacity would work to reduce opacity, but I don't believe I could prolong the visibility using canvas.

@catdad catdad added good first issue Good for newcomers and removed info needed Extra information is needed to address the issue labels Oct 7, 2023
@catdad
Copy link
Owner

catdad commented Oct 7, 2023

The time it takes for confetti to fade is controlled by the ticks value. If that value is increased, the confetti will be visible for longer.

What you seem to be suggesting is setting a single opacity and turning off fading. That's not necessarily bad, but can be awkward when dealing with different screen sizes -- e.g. the confetti will just disappear suddenly on larger screens. There are already cases where confetti can look awkward though, so that's more of a usability thing rather than an actual problem. With that said, maybe minOpacity, maxOpacity, initialOpacity might make more sense if users need granular control over opacity.

This is not really a high priority right now (as evident by a super late response... sorry). I am leaving this open though, in case interest increases in this.

@Josepdal
Copy link

Josepdal commented Oct 21, 2023

Hi, I would also be interested in removing the fade effect. In my case the canvas is inside a box and the particles would disappear at the bottom of it instead of fading out. Is there a solution I can currently apply?

I'm going to look into that you said, see if I can do something.
The time it takes for confetti to fade is controlled by the ticks value. If that value is increased, the confetti will be visible for longer.

EDIT:
I ended up throwing more than 1 confetti to extend the time and I liked the final result.
There are many examples on the page kirilv.com/canvas-confetti that can give you some good ideas. Worth seeing, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

3 participants