Getting Started With the Mojs Animation Library: The ShapeSwirl and Stagger Modules

The first and second tutorials of this series covered how to animate different HTML elements and SVG shapes using mojs. In this tutorial, we will learn about two more modules which can make our animations more interesting. The ShapeSwirl module allows you to add a swirling motion to any shape that you create. The stagger module, on the other hand, allows you to create and animate multiple shapes at once.

Using the ShapeSwirl Module

The ShapeSwirl module in mojs has a constructor which accepts all the properties of the Shape module. It also accepts some additional properties which allow it to create a swirling motion.

You can specify the amplitude or size of the swirl using the swirlSize property. The oscillation frequency during the swirling motion is determined by the value of the swirlFrequency property. You can also scale down the total path length of the swirling shape using the pathScale property. Valid values for this property range between 0 and 1. The direction of the motion can be specified using the direction property. Keep in mind that direction only has two valid values: -1 and 1. The shapes in a swirling motion will follow a sinusoidal path by default. However, you can animate them along straight lines by setting the value of isSwirl property to false.

Besides these additional properties, the ShapeSwirl module also changes the default value of some properties from the Shape module. The radius of any swirling shape is set to 5 by default. Similarly, the scale property is set to be animated from 1 to 0 in the ShapeSwirl module.

In the following code snippet, I have used all these properties to animate two circles in a swirling motion.

var circleSwirlA = new mojs.ShapeSwirl({
  parent: ".container",
  shape: "circle",
  fill: "red",
  stroke: "black",
  radius: 20,
  y: {
    0: 200
  },
  angle: {
    0: 720
  },
  duration: 2000,
  repeat: 10
});

var circleSwirlB = new mojs.ShapeSwirl({
  parent: ".container",
  shape: "circle",
  fill: "green",
  stroke: "black",
  radius: 20,
  y: {
    0: 200
  },
  angle: {
    0: 720
  },
  duration: 2000,
  swirlSize: 20,
  swirlFrequency: 10,
  isSwirl: true,
  pathScale: 0.5,
  repeat: 10
});

In the following demo, you can click on the Play button to animate two circles, a triangle and a cross in a swirling motion. 

Using the Stagger Module

Unlike all other modules that we have discussed so far, stagger is not a constructor. This module is actually a function which can be wrapped around any other module to animate multiple shapes or elements at once. This can be very helpful when you want to apply the same animation sequence on different shapes but still change their magnitude independently.

Once you have wrapped the Shape module inside the stagger() function, you will be able to specify the number of elements to animate using the quantifier property. After that, you can specify the value of all other Shape related properties. It will now become possible for each property to accept an array of values to be applied on individual shapes sequentially. If you want all shapes to have the same value for a particular property, you can just set the property to be equal to that particular value instead of an array of values.

The following example should clarify how the values are assigned to different shapes:

var staggerShapes = mojs.stagger(mojs.Shape);

var triangles = new staggerShapes({
  quantifier: 5,
  shape: 'polygon',
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 5,
  radius: [20, 30, 40, 50, 60],
  left: 100,
  top: 200,
  x: [{0: 100}, {0: 150}, {0: 200}, {0: 250}, {0: 300}],
  duration: 2000,
  repeat: 10,
  easing: 'quad.in',
  isYoyo: true,
  isShowStart: true
});

We begin by wrapping the Shape module inside the stagger() function. This allows us to create multiple shapes at once. We have set the value of the quantifier property to 5. This creates five different shapes, which in our case are polygons. Each polygon is a triangle because the default value of the points property is 3. We have already covered all these properties in the second tutorial of the series.

There is only one value of fill, stroke, and strokeWidth. This means that all the triangles will be filled with yellow and will have a black stroke. The width of stroke in each case would be 5px. The value of the radius property, on the other hand, is an array of five integers. Each integer determines the radius of one triangle in the group. The value 20 is assigned to the first triangle, and the value 60 is assigned to the last triangle.

All the properties have had the same initial and final values for the individual triangles so far. This means that none of the properties would be animated. However, the value of the x property is an array of objects containing the initial and final value of the horizontal position of each triangle. The first triangle will translate from x:0 to x:100, and the last triangle will translate from x:0 to x:300. The animation duration in each case would be 2000 milliseconds.

If there is a fixed step between different values of a property, you can also use stagger strings to specify the initial value and the increments. Stagger strings accept two parameters. The first is the start value, which is assigned to the first element in the group. The second value is step, which determines the increase or decrease in value for each successive shape. When only one value is passed to the stagger string, it is considered to be the step, and the start value in this case is assumed to be zero.

The triangle example above could be rewritten as:

var staggerShapes = mojs.stagger(mojs.Shape);

var triangles = new staggerShapes({
  quantifier: 5,
  shape: 'polygon',
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 5,
  radius: 'stagger(20, 10)',
  left: 100,
  top: 200,
  x: {0: 'stagger(100, 50)'},
  duration: 2000,
  repeat: 10,
  easing: 'quad.in',
  isYoyo: true,
  isShowStart: true
});

You can also assign random values to different shapes in a group using rand strings. You just have to supply a minimum and maximum value to a rand string, and mojs will automatically assign a value between these limits to individual shapes in the group.

In the following example, we are using the rand strings to randomly set the number of points for each polygon. You may have noticed that the total number of polygons we are rendering is 25, but the fill array only has four colors. When the array length is smaller than the value of the quantifier, the values for different shapes are determined by continuously cycling through the array until all the shapes have been assigned a value. For example, after assigning the color of the first four polygons, the color of the fifth polygon would be orange, the color of the sixth polygon would be yellow, and so on.

The stagger string sets the radius of the first polygon equal to 10 and then keeps increasing the radius of subsequent polygons by 1. The horizontal position of each polygon is similarly increased by 20, and the vertical position is determined randomly. The final angle value for each polygon is randomly set between -120 and 120. This way, some polygons rotate in a clockwise direction while others rotate in an anti-clockwise direction. The angle animation is also given its own easing function, which is different from the common animation of other properties.

var staggerShapes = mojs.stagger(mojs.Shape);

var polygons = new staggerShapes({
  quantifier: 25,
  shape: 'polygon',
  points: 'rand(3, 6)',
  fill: ['orange', 'yellow', 'cyan', 'lightgreen'],
  stroke: 'black',
  radius: 'stagger(10, 1)',
  left: 100,
  top: 100,
  x: 'stagger(0, 20)',
  y: 'rand(40, 400)',
  scale: {1: 'rand(0.1, 3)'},
  angle: {0: 'rand(-120, 120)', easing: 'elastic.in'},
  duration: 1000,
  repeat: 10,
  easing: 'cubic.in',
  isYoyo: true,
  isShowStart: true
});

Final Thoughts

We covered two more mojs modules in this tutorial. The ShapeSwirl module allows us to animate different shapes in a swirling motion. The stagger module allows us to animate multiple shape elements at once.

Each shape in a stagger group can be animated independently without any interference from other shapes. This makes the stagger module incredibly useful. We also learned how to use stagger strings to assign values with fixed steps to properties of different shapes.

If you have any questions related to this tutorial, please let me know in the comments. We will learn about the Burst module in the next tutorial of this series.

For additional resources to study or to use in your work, check out what we have available in the Envato Market.