Particle Effects
Bonzai avatar
Written by Bonzai
Updated over a week ago

Particle effects help simulate the different particle movement which are otherwise difficult to reproduce. Trying to reproduce these effects through the normal animation would be tedious and the outcome would lack the finesse.

Based on these particle effects, there are currently 9 outcomes one can choose from. They are as follows.

  1. Bubble

  2. Smoke

  3. Snow

  4. Rain

  5. Star

  6. Confetti

  7. Fire

  8. Fog

  9. Cloud


The effects can be used in combination if required. An example below where Rain and smoke together are used to create the required scene.

A point to note would be the rendering of the effects is dependant on the device hardware. So adding multiple effects can cause the animation to appear jerky on some devices as it increases processing by the machine.


How to use

All of these are currently available as simple Drag & Drop effects from the Elements Pane. These rest within the 'Widgets' section.

Each effect is rendered based on the constraints of it’s own bounding box.

To get the desired output, there are various parameters that are available to be modified. These may vary for each of the effects. These are available within the behaviour section for each of the effects.

The parameters are as follows:

  • Size: This allows you to decide the size of the particle creating the effect. In some effects all the particles may not be of the same size to showcase depth or distance. So based on the size change, all such sizes would be affected proportionally.

  • Density: Density determines the compactness of particles within the effects. Increasing the density will lead to reduction in the empty space

  • Speed: This allows you to speed up or slow down the particle effect

  • Particle Life: This allows you to decide the life of particles within the effect. So, here if the distance to be covered is large and the particle life is less, the particles wouldn’t cover the entire distance. Higher the particle life, the larger distance it can cover.

  • Direction: Direction allows you to change the angle of the projection for the effect.

  • Randomness: This helps give some variation to the movement. This helps avoid monotonous repetition which looks unnatural. This is useful for effects like smoke, confetti etc.

  • Gravity: It is the amount of gravitational force to be applied to the particles. Any change to this needs to be looked at in conjunction with the speed of the particles as well.

  • Image: Users can change the stock image with a desired image if required.

  • Magnitude: This allows us to control the height of the particle. This is useful for effect Fire to manage the flame.

  • Color: This allows you to change the Color/Shade of the particle. It contains the Initial Color module. You can find it under the Color category.

  • Gap: This allows you to increase the gap (Lacunarity) in the flame, to handle the consistency.

  • Noise: Noise allows to add turbulence to particle movement. Adding noise to your particles is a simple and effective way to create interesting patterns and effects.


Know Limitations:

  • There is no on-canvas preview. So the parameters need to be modified and then checked by previewing the creative.

  • For Smoke & Bubble, trying to match the emit point with other elements within the creative can be a challenge in a responsive creative.

  • Fire has the option for Built-up to 100% intensity.



Points to note:

  • Certain other effects can be achieved by changing the stock image on a certain effect. For example, 'embers' could be achieved by changing the stock image for the 'Bubble' effect.

  • Confetti allows adding multiple images.

  • Event can be applied to load the particle effect and the assets together to avoid the jerk if the particle rendering varies depending on device hardware.

  • Avoid adding animation to effects wherever possible.


Did this answer your question?