DEV Community

loading...
Cover image for tsParticles 1.30.0 is here! Confetti rework (all particles shapes supported, emojis too, with sample inside)

tsParticles 1.30.0 is here! Confetti rework (all particles shapes supported, emojis too, with sample inside)

Matteo Bruni
Full Stack Developer, mainly working in .NET with web technologies and mobile (Xamarin). WWDC14 Attendee, when Swift was presented, a bit rusty but can work in Swift too.
・2 min read

tsParticles 1.30.0

New Features

  • Added wobble effect to particles, configurable in options
  • Added tilt effect to particles, configurable in options
  • Added roll options to particles, configurable in options
  • Added all new sections to editor

Bug Fixes

  • Fixed old TypeScript definitions generation, fixes #1683
  • Simplified confetti preset, if the first parameter is not specified, a random id will be used
  • tsParticles will create an element if the id used is not valid

Breaking Changes

  • Confetti animations are now split in three generic particles sections (roll, tilt, wobble)
  • Removed confetti shape, it's no longer needed
  • The library has changed the output folders, the dist/ folder has been removed.

A note about the dist/ folder

Imports (import)

In most cases this change will affect only who are using internal imports.

This tsparticles/dist can be safely replaced to tsparticles.

CDN or Vanilla

This will affect also everyone using tsParticles with CDNs since the dist folder is no longer part of the path, but if it's copied from the CDN website it's fine.

A note about wobble, tilt and roll

These three new particles options sections will create a wonderful and realistic confetti effect to all particles. You can use any shape with these effects, even external ones, self-created or not. The only one not compatible is confetti because it's been replaced by these properties.

What do they means?

Roll

Roll makes particles roll on their y axis. They look like they're falling rolling on themself. In these options you can set a back color (that will be visible when the particle has flipped).

The color is optional and a darken or a enlighten section can be alternatively configured.

The reading values order is:

  • Back Color
  • Darken
  • Enlighten

So if enlighten and darken are both specified, only darken will be read.

darken and enlighten have a value and enable, the first will subtract the luminosity of the color for that value, the second will add it, only if the enable value is true.

Tilt

Tilt is responsible for particles deformation, the particles will be tilted following the specified parameters. This is not animated by default, the options are similar to rotate, they don't have path since is not valid here.

If a value is set all particles will be tilted for that angle (both horizontally and vertically using cos and sin functions), when animated the angle will be increased or decreased, depending on set direction.

Wobble

Wobble is the horizontal movement that simulates the air resistance. The particles will bounce from left to right with a configurable speed and distance.


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


Let's see the new confetti options in action

Yes, you saw right. Confetti can be emojis too! 😎

Discussion (0)