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.

Thanks

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 https://airbnb.design/introducing-lottie/

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;
        height:#{$w*0.4}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)+"%");
        }
    }
}

it’s not work. can you explain in details ? i need it @reedrichards

Can’t tell you more, it’s the exact same working code I’m using in my app

hmm it’s ok,thanks for fast reply i try @fmoh answer and it’s work.