Confetti animation

Ionic Framework ionic-v3
1

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

2

You can try CSS3 animations or Angular animations.

3

Here are examples of CSS3 & javascript confetti animations:

4

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

5

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.

6

Check out https://airbnb.design/introducing-lottie/

7

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

1 Like
8

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)+"%");
        }
    }
}
9

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

10

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

11

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