Feature Request: "delay for animation to start" or "delay for first emitter to start"

What is your request?

Good morning.

I use the firework preset. Currently I need to set in JavaScript a command to await 8 seconds before the first firework explosion ever starts to be emitted. After the first explosion, subsequent explosions follow shortly after, less than a second later.

Is it possible to set just with tsParticles, this initial delay for the first emitter/firework explosion to start? That is, the possibility of set a delay time for the start of tsParticles?

if this option doesn’t exist, please consider developing it as “delay for animation to start” or “delay for first emitter to start” as it allows control over starting animations in sequence with other animations.

I migrated all tsParticles from JavaScript to the WordPress block, successfully, thanks to your nice Gutenberg block. This 8 second delay before the fireworks preset is the only preset that I’m not able to migrate. I’m not experienced in JavaScript. So I’m not able to apply the addeventlistener in the WordPress block.

<script>
(async () => {
    const container = await tsParticles.load("tsparticles", {

        /*some options omitted*/

	"duration": 0,
	"emitters": {
		"autoPlay": false,
		"fill": true,
		"life": {
			"wait": false,
			"count": 0,
			"delay": 0.1,
			"duration": 0.1
		},
		"rate": {
			"quantity": 1,
			"delay": 0.25
		},
		"shape": "circle",
		"startCount": 4,
		"size": {
			"mode": "percent",
			"height": 0.1,
			"width": 0.1
		},
		"direction": "top-center",
		"position": {
			"x": 48.75,
			"y": 77.75
		}
	}
    });

    document.addEventListener("DOMContentLoaded", () => {
        setTimeout(() => {
	    container.playEmitter();
        }, 8000);
    });

})();
</script>

tsParticles Version

2.3.1

Which library are you using?

Vanilla (tsparticles)

Code of Conduct

• I agree to follow this project’s Code of Conduct

[tomandjerry36]

https://www.freecodecamp.org/news/javascript-settimeout-js-timer-to-delay-n-seconds/

https://www.npmjs.com/package/event-emitter-es6

These Links might help

[matteobruni]

Thank you again.

Oh, the sample in codepen is exactly what I meant. You achieve it so simply and you explain very well the options available. I don’t know where I am getting it wrong. I am going to leave my full sample here while I try to solve it.

{
	"autoPlay": true,
	"fullScreen": {
		"enable": false,
		"zIndex": 0
	},
	"detectRetina": true,
	"duration": 0,
	"fpsLimit": 25,
	"interactivity": {
		"detectsOn": "window",
		"events": {
			"onClick": {
				"enable": true,
				"mode": "push"
			},
			"resize": true
		},
		"modes": {
			"push": {
				"default": true,
				"groups": [],
				"quantity": 1
			}
		}
	},
	"motion": {
		"disable": false,
		"reduce": {
			"factor": 4,
			"value": true
		}
	},
	"particles": {
		"color": {
			"value": "#fff"
		},
		"destroy": {
			"mode": "split",
			"split": {
				"count": 1,
				"factor": {
					"value": 0.333333
				},
				"rate": {
					"value": 100
				},
				"sizeOffset": true,
				"particles": {
					"stroke": {
						"width": 0
					},
					"color": {
						"value": [
							"#1982c4",
							"#3cafdd",
							"#3cddd5",
							"#8ac926",
							"#ffca3a",
							"#dd9a3c",
							"#ff595e",
							"#dd3ca7",
							"#6a4c93",
							"#ffffff",
							"#ffffff",
							"#ffffff",
							"#ffffff"
						]
					},
					"opacity": {
						"value": {
							"min": 0.1,
							"max": 1
						},
						"animation": {
							"enable": true,
							"speed": 0.7,
							"sync": false,
							"startValue": "max",
							"destroy": "min"
						}
					},
					"shape": {
						"type": "circle"
					},
					"size": {
						"value": {
							"min": 1,
							"max": 2
						},
						"animation": {
							"enable": true,
							"speed": 5,
							"count": 1,
							"sync": false,
							"startValue": "min",
							"destroy": "none"
						}
					},
					"life": {
						"count": 1,
						"duration": {
							"value": {
								"min": 1,
								"max": 2
							}
						}
					},
					"move": {
						"decay": 0.05,
						"enable": true,
						"gravity": {
							"enable": true,
							"inverse": false,
							"acceleration": 5
						},
						"speed": {
							"min": 2,
							"max": 5
						},
						"direction": "none",
						"outMode": "destroy"
					}
				}
			}
		},
		"life": {
			"count": 1
		},
		"move": {
			"angle": {
				"offset": 0,
				"value": 90
			},
			"center": {
				"x": 50,
				"y": 50,
				"radius": 0
			},
			"decay": 0,
			"direction": "none",
			"drift": 0,
			"enable": true,
			"gravity": {
				"acceleration": 15,
				"enable": true,
				"inverse": true,
				"maxSpeed": 100
			},
			"path": {
				"clamp": true,
				"delay": {
					"value": 0
				},
				"enable": false
			},
			"outModes": {
				"default": "destroy",
				"bottom": "destroy",
				"left": "destroy",
				"right": "destroy",
				"top": "none"
			},
			"speed": {
				"min": 10,
				"max": 20
			}
		},
		"number": {
			"density": {
				"enable": false,
				"area": 800,
				"factor": 1000
			},
			"limit": 0,
			"value": 0
		},
		"opacity": {
			"value": 1
		},
		"reduceDuplicates": false,
		"rotate": {
			"value": 0,
			"direction": "clockwise",
			"path": true
		},
		"shadow": {
			"blur": 5,
			"color": {
				"value": "#ffffff"
			},
			"enable": false,
			"offset": {
				"x": 0,
				"y": 0
			}
		},
		"shape": {
			"type": "line"
		},
		"size": {
			"value": {
				"min": 0.1,
				"max": 50
			},
			"animation": {
				"count": 0,
				"enable": true,
				"speed": 90,
				"sync": true,
				"destroy": "min",
				"startValue": "max"
			}
		},
		"stroke": {
			"width": 1.5,
			"color": {
				"value": "#6e6e73"
			}
		},
		"zIndex": {
			"value": 0,
			"opacityRate": 1,
			"sizeRate": 1,
			"velocityRate": 1
		}
	},
	"pauseOnBlur": true,
	"pauseOnOutsideViewport": true,
	"zLayers": 100,
	"emitters": {
		"autoPlay": true,
		"fill": true,
		"life": {
			"wait": false,
			"count": 0,
			"delay": 8,
			"duration": 0.1
		},
		"rate": {
			"quantity": 1,
			"delay": 0.25
		},
		"shape": "circle",
		"startCount": 0,
		"size": {
			"mode": "percent",
			"height": 0.1,
			"width": 0.1
		},
		"direction": "top-center",
		"position": {
			"x": 50,
			"y": 80.8
		}
	}
}

Ok, I’ve understood the problem now, you’d like to replicate the fireworks preset with custom options.

I’ll break it down into 3 parts:

• Initial delay: achievable with life options of the emitters, duration and count are not needed
• Lines emission: achievable with rate, quantity determines how many particles spawn every delay seconds
• Explosion: achievable with particles.life options (main particles sections, or can be added to emitters as well, it overrides properties from the main config).

You can see all these properties here: https://codepen.io/matteobruni/pen/abJQrbK (it’s an old sample, but you can try the particles.life options.

In this sample also the particles.size.animation destroys the particles when reaching it’s maximum size (like the fireworks preset)