Confetti animation


Does anyone have any ideas how to create a confetti animation or balloon floating animation in the app? I’m thinking something like Facebook when you say “Congratulations” the whole screen fills up with confetti or floating balloons.



You can try CSS3 animations or Angular animations.


Here are examples of CSS3 & javascript confetti animations:


Did you manage to make the Party Preloader work in ionic?
I am having some issues to make it work…


I haven’t tried them all but I think you have issues with converting javascript into proper typescript on angular 5.
html script tag will not work on webview.

This is one of the reasons which I wish < script > tag with normal javascript will work on capacitor… then we can use anything on codepen by simply copy & paste.


Check out


I have tried this and so far it works really well with ionic!


I found once a pure css, no external library, solution for confetti on stackblitz I think:

// Confetti

[class|="confetti"] {
    position: absolute;

$colors: (red, green, yellow);

@for $i from 0 through 150 {
    $w: random(8);
    $l: random(100);
    .confetti-#{$i} {
        width: #{$w}px;
        background-color: nth($colors, random(3));
        top: -10%;
        left: unquote($l+"%");
        opacity: random() + 0.5;
        transform: rotate(#{random()*360}deg);
        animation: drop-#{$i} unquote(4+random()+"s") unquote(random()+"s") infinite;

    @keyframes drop-#{$i} {
        100% {
            top: 110%;
            left: unquote($l+random(15)+"%");