Back
Create Beautiful Animations by Integrating Particles.js With React
Have you ever wondered how some programmers are able to produce beautiful backdrop animations? You can, too, by utilizing Particle.js in your React apps.
Have you ever wondered how some programmers are able to produce beautiful backdrop animations like fireworks, confetti, or a night sky with twinkling stars? I initially assumed it was just a video playing in the background, or that some rockstar developer had spent hours creating it manually. However, after doing a lot of research, I discovered a great package for creating nice background animations without the need for any complicated code. The JavaScript plugin used to make 2D animations like the ones mentioned above is called Particles.js.
Particles.js is a dependency-free, lightweight, responsive JavaScript plugin for the kind of adaptable, reactive particle design that can be used for different projects.
Using react-tsparticles, you can incorporate Particles.js into your React app, creating beautiful animations that will undoubtedly draw in more viewers.
Prerequisites
Knowledge of JavaScript
Node.js
React.js
Knowledge of command-line syntax
Create a React Project
Use npx create-react-app my-app to start a fresh React app, or keep working on an existing one if you've already started.
The work will be done in the App.js file, which can be found in your app:
You’ll have to edit the App.js file to remove some unnecessary code bases. Below is App.js after editing:
Integrating Particle.js with a React Project
Next, you must first install both tsparticles and react-tsparticles in your project as dependencies. Both packages will enable your app to run Particles in the right order.
After that, import Particles from react-tsparticles and { loadFull } from tsparticles:
You can use the Particles component by passing some props such as init and id, which will be initialization functions. Also, you’ll use the options prop, which will be the configurations for particles that we want to display:
You’re almost done! You just have to configure your particles/objects in order of animation, interaction, direction, opacity, etc. For this illustration, you’ll be using an already preset configuration from the tsparticles repository, but you can always tweak it to your own style or create one from scratch if you’d like.
Below is the particle configuration for the project:
As a result, you’ll have this nice animation:
Now that you have options for different preset configurations, play with them! Below is a link to a GitHub repository that contains a list of various settings for different particles.
Resources
