DEV Community

Cover image for [Angular] How to create beautiful and realistic confetti animations using tsParticles
tsParticles profile image Matteo Bruni
Matteo Bruni for tsParticles

Posted on • Edited on

[Angular] How to create beautiful and realistic confetti animations using tsParticles

#angular #javascript #showdev #webdev

I wrote a post about tsParticles and the new confetti animation created in the 1.30 version.

tsParticles

[JS] How to create beautiful and realistic confetti animation with tsParticles

Matteo Bruni for tsParticles ・ Jun 29 '21

#showdev #javascript #html #webdev

This configuration can be used as is in any Angular tsParticles installation (ng-particles package).

app.module.ts

import { NgParticlesModule } from "ng-particles";

@NgModule({
  declarations: [/* ... */],
  imports: [/* ... */, NgParticlesModule],
  providers: [],
  bootstrap: [/* ... */]
})
Enter fullscreen mode Exit fullscreen mode

app.component.html

<!-- this component can be placed anywhere -->
<Particles id="tsparticles" [options]="options"></Particles>
Enter fullscreen mode Exit fullscreen mode

app.component.ts

export class AppComponent {
  options = {
    /* ... */
  }

  /* ... */
}
Enter fullscreen mode Exit fullscreen mode

A working sample can be found below

GitHub logo tsparticles / tsparticles

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

View on GitHub

Top comments (0)

Read next

lymestack profile image

Implementing Auth in .NET WebApi & SPAs: Why is it still so painful?

Michael Joseph -

anticoder03 profile image

Day 4: Enhancing UX with a Custom Cursor Using GSAP πŸš€πŸŽ¨

Ashish prajapati -

holawagtail_3398ffb6acec6 profile image

Β‘Hola Wagtail!

HolaWagtail -

jamcha123 profile image

My first full stack app

james -