Audero Smoke Effect Demo - Created by Aurelio De Rosa

Example 1 - Basic

This example shows the most basic configuration in which you set only the path to the image to animate, and use all the default values for the other options.

Example 2 - Set options

This example demonstrates how you can customize the animation passing other options to the initialization method. In this case, the speed of the animation has been set to 3000 milliseconds (3 seconds), and there is a random pause between two animations.

Example 3 - Run animation on user interaction

This example is quite different from the previous in the behavior. In fact, the animation starts once the user clicks the button reading "Run animation" and will show only one puff because of the repeat option set to 1. In addition, the animated image will be scaled up by a factor of two and it'll start from the top-left corner of the chicken.

Example 4 - Toggle animation on user interaction

This example shows how you can initialize the animation, setting all the options on the element, but disable it by default, using the isEnabled property. In this case, the animation won't start unless enabled. Every time the user clicks the button reading "Toggle animation" the animation will be enabled or disabled depending on its previous status.