In the previous tutorial, we used mojs to animate different HTML elements on a webpage. We used the library to mainly animate div elements which looked like squares or circles. However, you can use the Html module to animate all kinds of elements like images or headings. If you actually intend to animate basic shapes using mojs, you should probably use the Shape module from the library.

The Shape module allows you to create basic shapes in the DOM using SVG. All you have to do is specify the type of shape that you want to create, and mojs will take care of the rest. This module also allows you to animate different shapes that you create. 

In this tutorial, we will cover the basics of the Shape module and how you can use it to create different shapes and animate them.

Creating Shapes in Mojs

You need to instantiate a mojs Shape object in order to create different shapes. This object will accept different parameters which can be used to control the color, size, angle, etc. of the shapes that you create.

By default, any shape that you create will use the document body as its parent. You can specify any other element as its parent using the parent property. You can also assign a class to any shape that you create with the help of the className property. The library will not assign any default class if you skip this property.

Mojs has eight different shapes built in so that you can create them directly by setting a value for the shape property. You can set its value to circle to create circles, rect to create rectangles, and polygon to create polygons. You can also draw straight lines by setting the value of shape to be lines. The library will draw two perpendicular lines if the shape value is cross and a number of parallel lines if the shape is equal. Similarly, zigzag lines can be created by setting the property value to zigzag.

The shape object also has a points property which has different meanings for different shapes. It determines the total number of sides in a polygon and the total number of parallel lines in an equal shape. The points property can also be used to set the number of bends in a zigzag line.

As I mentioned earlier, mojs creates all these shapes using SVG. This means that the Shape object will also have some SVG specific properties to control the appearance of these shapes. You can set the fill color of a mojs shape using the fill property. When no color is specified, the library will use the deeppink color to fill the shape. Similarly, you can specify the stroke color for a shape using the stroke property. When no stroke color is specified, mojs keeps the stroke transparent. You can control the fill and stroke opacity for a shape using the fillOpacity and strokeOpacity properties. They can have any value between 0 and 1.

Mojs allows you to control other stroke-related properties of a shape as well. For instance, you can specify the pattern of dashes and gaps in a stroke path using the strokeDasharray property. This property accepts both strings and numbers as valid values. Its default value is zero, which means that the stroke will be a solid line. The width of a stroke can be specified using the strokeWidth property. All the strokes will be 2px wide by default. The shape of different lines at their end points can be specified using the strokeLinecap property. Valid values for strokeLinecap are butt, round, and square.

Any shape that you create is placed at the center of its parent element by default. This is because the left and right properties for a shape are set to 50% each. You can change the values of these properties to place the elements in different locations. Another way to control the position of a shape is with the help of the x and y properties. They determine how much a shape should be shifted in the horizontal and vertical direction respectively.

You can specify the radius of a shape using the radius property. This value is used to determine the size of a particular shape. You can also use radiusX and radiusY to specify the size of a shape in a particular direction. Another way of controlling the size of a shape is with the help of the scale property. The default value of scale is 1, but you can set it to any other number you like. You can also scale a shape in a particular direction using the scaleX and scaleY properties.

The origin of all these transformations of a shape is its center by default. For example, if you rotate any shape by specifying a value for the angle property, the shape will rotate around its center. If you want to rotate a shape around some other point, you can specify it using the origin property. This property accepts a string as its value. Setting it to '0% 0%' will rotate, scale or translate the shape around its top left corner. Similarly, setting it to '50% 0%' will rotate, scale or translate the shape around the center of its top edge.

You can use all these properties we just discussed to create a large variety of shapes. Here are a few examples:

var circleA = new mojs.Shape({
  parent: ".container",
  shape: "circle",
  left: 0,
  fill: "orange",
  stroke: "black",
  strokeWidth: 5,
  isShowStart: true
});

var circleB = new mojs.Shape({
  parent: ".container",
  shape: "circle",
  left: 175,
  fill: "orange",
  stroke: "red",
  radiusX: 80,
  strokeWidth: 25,
  strokeDasharray: 2,
  isShowStart: true
});

var rectA = new mojs.Shape({
  parent: ".container",
  shape: "rect",
  left: 350,
  fill: "red",
  stroke: "black",
  strokeWidth: 5,
  isShowStart: true
});

var rectB = new mojs.Shape({
  parent: ".container",
  shape: "rect",
  left: 500,
  fill: "blue",
  stroke: "blue",
  radiusX: 40,
  radiusY: 100,
  strokeWidth: 25,
  strokeDasharray: 20,
  isShowStart: true
});

var polyA = new mojs.Shape({
  parent: ".container",
  shape: "polygon",
  top: 300,
  left: 0,
  fill: "yellow",
  stroke: "black",
  strokeWidth: 10,
  points: 8,
  isShowStart: true
});

var polyB = new mojs.Shape({
  parent: ".container",
  shape: "polygon",
  top: 350,
  left: 175,
  radiusX: 100,
  radiusY: 100,
  fill: "violet",
  stroke: "black",
  strokeWidth: 6,
  strokeDasharray: "15, 10, 5, 10",
  strokeLinecap: "round",
  points: 3,
  isShowStart: true
});

var lineA = new mojs.Shape({
  parent: ".container",
  shape: "cross",
  top: 350,
  left: 375,
  stroke: "red",
  strokeWidth: 40,
  isShowStart: true
});

var zigzagA = new mojs.Shape({
  parent: ".container",
  shape: "zigzag",
  top: 500,
  left: 50,
  fill: "transparent",
  stroke: "black",
  strokeWidth: 4,
  radiusX: 100,
  points: 10,
  isShowStart: true
});

var zigzagB = new mojs.Shape({
  parent: ".container",
  shape: "zigzag",
  top: 500,
  left: 350,
  fill: "blue",
  stroke: "transparent",
  radiusX: 100,
  points: 50,
  isShowStart: true
});

The shapes created by the above code are shown in the CodePen demo below:

Animating Shapes in Mojs

You can animate almost all the properties of a shape that we discussed in the previous section. For instance, you can animate the number of points in a polygon by specifying different initial and final values. You can also animate the origin of a shape from '50% 50%' to any other value like '75% 75%'. Other properties like angle and scale behave just like they did in the Html module. 

The duration, delay and speed of different animations can be controlled using the duration, delay and speed properties respectively. The repeat property also works like it did in the Html module. You can set it to 0 if you want to play the animation only once. Similarly, you can set it to 3 to play the animation 4 times. All the easing values that were valid for the Html module are also valid for the Shape module.

The only difference between the animation capabilities of these two modules is that you cannot specify the animation parameters individually for the properties in the Shape module. All the properties that you are animating will have the same duration, delay, repetitions, etc.

Here is an example where we animate the x position, scale and angle of a circle:

var circleA = new mojs.Shape({
  parent: ".container",
  shape: "circle",
  left: 175,
  fill: "red",
  stroke: "black",
  strokeWidth: 100,
  strokeDasharray: 18,
  isShowStart: true,
  x: {
    0: 300
  },
  angle: {
    0: 360
  },
  scale: {
    0.5: 1.5
  },
  duration: 1000,
  repeat: 10,
  isYoyo: true,
  easing: "quad.in"
});

One way to control the playback of different animations is by using the .then() method to specify a new set of properties to be animated after the first animation sequence has fully completed. You can give all animation properties new initial and final values inside .then(). Here is an example:

var polyA = new mojs.Shape({
  parent: ".container",
  shape: "polygon",
  fill: "red",
  stroke: "black",
  isShowStart: true,
  points: 4,
  left: 100,
  x: {
    0: 500
  },
  strokeWidth: {
    5: 2
  },
  duration: 2000,
  easing: 'elastic.in'
}).then({
  strokeWidth: 5,
  points: {
    4: 3
  },
  angle: {
    0: 720
  },
  scale: {
    1: 2
  },
  fill: {
    'red': 'yellow'
  },
  duration: 1000,
  delay: 200,
  easing: 'elastic.out'
});

Final Thoughts

In this tutorial, we learned how to create different shapes using mojs and how to animate the properties of these shapes. 

The Shape module has all the animation capabilities of the Html module. The only difference is that the properties cannot be animated individually. They can only be animated as a group. You can also control the animation playback by using different methods to play, pause, stop and resume the animations at any point. I covered these methods in detail in the first tutorial of the series.

If you have any questions related to this tutorial, feel free to post a comment. In the next tutorial, you will learn about the ShapeSwirl and stagger modules in mojs.