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

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

[JS] How to create beautiful and realistic confetti animation with tsParticles
Matteo Bruni ・ Jun 29 ・ 6 min read…

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

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: [/* ... */]
})

app.component.html

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

app.component.ts

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

  /* ... */
}

A working sample can be found below

GitHub logo

matteobruni
/
tsparticles

tsParticles – Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

banner

tsParticles – TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React, Vue, Angular, Svelte, jQuery, Preact, Inferno

Rate on Openbase jsDelivr Cdnjs npmjs npm lerna CodeFactor Codacy Badge Gitpod Ready-to-Code Run on Repl.it

Do you want to use it on your website?

This library is available on the two most popular CDNs and it’s easy and ready to use, if you were using particles.js it’s even easier.

You’ll find the instructions below, with all the links you need, and don’t be scared by TypeScript, it’s just the source language.

The output files are just JavaScript. ?

CDNs and npm have all the sources you need in Javascript, a bundle browser ready (tsparticles.min.js) and all files splitted for import syntax.

If you are still interested some lines below there are some instructions for migrating from the old particles.js library.

Library installation

Hosting / CDN

Please use this hosts or your own to


Print Share Comment Cite Upload Translate
APA
Matteo Bruni | Sciencx (2024-03-29T10:54:39+00:00) » [Angular] How to create beautiful and realistic confetti animations using tsParticles. Retrieved from https://www.scien.cx/2021/06/30/angular-how-to-create-beautiful-and-realistic-confetti-animations-using-tsparticles/.
MLA
" » [Angular] How to create beautiful and realistic confetti animations using tsParticles." Matteo Bruni | Sciencx - Wednesday June 30, 2021, https://www.scien.cx/2021/06/30/angular-how-to-create-beautiful-and-realistic-confetti-animations-using-tsparticles/
HARVARD
Matteo Bruni | Sciencx Wednesday June 30, 2021 » [Angular] How to create beautiful and realistic confetti animations using tsParticles., viewed 2024-03-29T10:54:39+00:00,<https://www.scien.cx/2021/06/30/angular-how-to-create-beautiful-and-realistic-confetti-animations-using-tsparticles/>
VANCOUVER
Matteo Bruni | Sciencx - » [Angular] How to create beautiful and realistic confetti animations using tsParticles. [Internet]. [Accessed 2024-03-29T10:54:39+00:00]. Available from: https://www.scien.cx/2021/06/30/angular-how-to-create-beautiful-and-realistic-confetti-animations-using-tsparticles/
CHICAGO
" » [Angular] How to create beautiful and realistic confetti animations using tsParticles." Matteo Bruni | Sciencx - Accessed 2024-03-29T10:54:39+00:00. https://www.scien.cx/2021/06/30/angular-how-to-create-beautiful-and-realistic-confetti-animations-using-tsparticles/
IEEE
" » [Angular] How to create beautiful and realistic confetti animations using tsParticles." Matteo Bruni | Sciencx [Online]. Available: https://www.scien.cx/2021/06/30/angular-how-to-create-beautiful-and-realistic-confetti-animations-using-tsparticles/. [Accessed: 2024-03-29T10:54:39+00:00]
rf:citation
» [Angular] How to create beautiful and realistic confetti animations using tsParticles | Matteo Bruni | Sciencx | https://www.scien.cx/2021/06/30/angular-how-to-create-beautiful-and-realistic-confetti-animations-using-tsparticles/ | 2024-03-29T10:54:39+00:00
https://github.com/addpipe/simple-recorderjs-demo