# Burst

Burst is the module that helps you to craft numerous sophisticated motion effects.

API reference

Please make sure you are comfortable with Shapes & ShapeSwirl before proceeding with this tutorial. Understanding those modules is crucial for understanding the Burst.

# Burst

Burst is a higher order module that creates sophisticated visual effects in any part of the screen you want. You can think of Burst as a particle emitter that composes a bunch of ShapeSwirl's together, creating a circle of particles.

That's how it looks like by default:

const burst = new mojs.Burst();

document.addEventListener( 'click', function (e) {
  burst.replay();
});

Click somewhere to see

Just like with Shape, mojs takes care about all bootstrapping work, creates as narrow container for the burst as possible and positioning the effect for you.

From the technical point of view, Burst is just a main ShapeSwirl that holds a bunch of child ShapeSwirl's. Pictorially it looks like this:

Illustration of how the burst swirls works

The main swirl has no shape nor any presentation properties and in fact, is 0 size by default completely unreachable for user's interaction pointer.

Another important note is that radius property (and radiusX/radiusY ones) has different meaning - it controls the radius of radial shape of particles:

const burst = new mojs.Burst({
  radius: { 0: 100 }
});

Click somewhere to see

There are few more properties that Burst implements over ShapeSwirl to control the radial shape behavior that particles compose. The first one is the count property that sets the amount of particles:

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    3
});

Click somewhere to see

The particles of the burst are evenly placed in a 360 degree circle, which you can narrow down with the degree property:

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    5,
  degree:   30
});

Click somewhere to see

Here above, we have a burst that has 30 degrees of sufficient place for particles.

It is very important to note here that since the main swirl of Burst module has no actual shape - it has no style attributes that define shape's presentation - all of them among which are the stroke or strokeWidth or fill are completely useless.

Also, the main swirl of the burst have no tween related properties like delay or duration, the later one gets computed automatically regarding the duration of the particles.

Nonetheless, all properties that control shape position, parent and opacity are present:

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    7,
  rotate:    { 0: 90 },
  opacity:  { 1: 0 },
});

Click somewhere to see

To recap, the main swirl of the Burst has no style attributes because it has no shape, furthermore it has no tween related properties like duration which is computed from the particles duration. But Burst has all the other properties, most of them regarding position, opacity, parent etc. You can always use the Burst API as the reference.

But Burst won't be much interesting unless we can control child particles, right?

# Children Options

You can control children options with the children object property:

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    5,
  degree:   30,
  children: {
    fill:       { 'magenta' : 'cyan' },
    duration:   2000
  }
});

Click somewhere to see

I have some good news for you - you already know Burst's syntax! Confusing claim? Nah! If you are familiar with Shape and ShapeSwirl modules - you know the Burst. That's because the Burst is nothing than just a ShapeSwirl that holds child ShapeSwirls, remember? This means you can put any property of ShapeSwirl to the children object, go try:

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    5,
  children: {
    shape:      'polygon',
    fill:       { 'cyan' : 'yellow' },
    radius:     20,
    rotate:      { 360: 0 },
    duration:   2000
  }
});

Click somewhere to see

Actually Burst gives you even more control over each child, allowing you to specify property for each of them explicitly. These two techniques are called Stagger Strings and Property Maps.

# Stagger Strings

Stagger Strings were designed to express continuous numeric values with some defined step (see delay property on children):

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    10,
  children: {
    shape:      'polygon',
    points:     5,
    fill:       { 'cyan' : 'yellow' },
    rotate:      { 360: 0 },
    duration:   2000,
    delay:      'stagger(0, 100)'
  }
});

Click somewhere to see

The first parameter in stagger function is the start value, all subsequent steps will be added to that start value, that is optional; If you just write stagger(25), it will mean to stagger with step of 25, starting from 0.

In the demo above, that's exact the same circle as in the demo before, but we have staggered the delay property so it looks rather spiral now.

Every numeric value can be expressed with stagger stings. Also, they can contain randoms (see the delay property in children):

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    10,
  children: {
    shape:      'polygon',
    points:     5,
    fill:       { 'cyan' : 'yellow' },
    rotate:      { 360: 0 },
    duration:   2000,
    delay:      'stagger( rand(0, 200) )'
  }
});

Click somewhere to see

We have staggered the delay with random function in interval of 0 to 200.

TIP

If you run the .generate() function before playing your burst, all random values will be recalculated for each time you play the burst. Like this:

burst.generate();
burst.replay();

# Property Maps

Property Map was designed to express sequential values. You can use it to generate values that repeat over and over but are mapped to children length. Basically, it is just an array that maps its values to children regarding child index with mod function. So if you have a property map with 3 values and burst has 5 children, then the 4th and 5th items will receive the 0th and 1st values from the map respectively:

const burst = new mojs.Burst({
  radius:   { 0: 100 },
  count:    5,
  children: {
    shape:        'circle',
    radius:       20,
    fill:         [ 'deeppink', 'cyan', 'yellow' ],
    strokeWidth:  5,
    duration:     2000
  }
});

So starting from 12 o'clock clockwise, the 5 childrens fill properties get values of deeppink, cyan, yellow and then again starting from the beginning of the property map - deeppink, cyan ( [0],[1],[2],[0],[1] ).

Property maps work with any property and property forms, in fact, that's just a prism (or multiplexer) that feeds children with properties by virtue of modulus function. Good aid if you want to set some property on child explicitly.

# then, tune, generate and play

You can make then state chains, tune and generate any Burst the same as you do with Shape or ShapeSwirl. Also, since the Burst is merely a ShapeSwirl under the hood, you can use any tween interface public method like play, setProgress, replay etc (click somewhere to see):

document.addEventListener( 'click', function (e) {
  burst
    .tune({ x: e.pageX, y: e.pageY })
    .setSpeed(3)
    .replay();
});

Click anywhere to see

# Recap

That's basically the burst, as I said you already know it so we won't go thru the children options again, instead, let's jog thru some use cases in the next section which will help as to gain some intuition over where and how to use the bursts. As you remember, - Burst is just a composition of a bunch of ShapeSwirls. There is the main swirl in the center of the burst but it has no visual shape. Also, it has no tween properties and its durations is calculated regarding the duration of the children. All child swirls use the main one as a parent. You can set properties of children with the appropriate property. Please, use the Burst API as the reference.

# Use Cases

Please note that the use cases section contains a lot of live code examples but the actual code samples are omitted for time savings and simplicity sake. The actual code is still available on the Babel tab of the pens and I highly encourage you to read through and play with them while we will walk through this section. You can omit reading large demos code since it is probably unreadable (some Codepens can contain bundled code) or it could be too large to understand sparingly, but you can return to them later. I will leave a little (×) mark for you to indicate that you can skip reading the source code of the Codepen for now.

Burst, in similarity with Shape or ShapeSwirl, has numerous application fields, among which are motion graphics and UI-animations. In contrary to the Shape & ShapeSwirl tutorial, I won't split use cases to different entities but rather will try to do lot's of small demos, each with explanation comments. Hang tight!

Micro Animations

The first thing that comes to mind when I see the default burst - is the famous Twitter's fav animation (opens new window). Animations like that are usually called micro animations but I've used to call them micro celebrations because of their festivity.

Anyways, sequences like that are a cinch when you have the burst module in your hands. Here's how to do the main part of the sequence (click anywhere to see):

See the Pen mograph by LegoMushroom (@sol0mka) on CodePen.

# Burst

# Burst

# Children Options

# Stagger Strings

# Property Maps

# then, tune, generate and play

# Recap

# Use Cases

Micro Animations

# Motion for the web

Blast all the things up

Modal blast

The sleepy mole

The dust trail

# Recap

# Thank you!