Create grow/shrink animation using FabricJS

We can create several types of animations using FabricJS. Starting from rotating, moving the object to fadein-fadeout, FabricJS has got us covered.

In this article, I will explain how we can create a simple grow-shrink animation using FabricJS. So scratch that “nothing” off of your to-do list and let’s get coding!

Step 1 : Initiating an Instance of fabric.Triangle

Here, I have used a triangle object. However, you are free to use whichever object you want. As I always say, the way to learn is to experiment!

It is absolutely okay to not know something and, in case you don’t know how to create an instance of fabric.Triangle, click here.

      var canvas = new fabric.Canvas("canvas", {
        backgroundColor: "black",
      });

      // Initiate a Triangle object
      var triangle = new fabric.Triangle({
        top: 80,
        left: 40,
        height: 30,
        width: 30,
        fill: "rgba(220,220,220,0.9)",
        stroke: "#dcdcdc",
        strokeWidth: 2,
        selectable: false,
      });

      // Add it to the canvas
      canvas.add(triangle);

Step 2 : Creating the grow function

In order to create a function we write the function keyword followed by the name that we want it to have. We must place the code that we want the function to execute inside the curly braces ie., { }

Here in order for our triangle object to grow in size, I have assigned the following value to both variables named valueX and valueY:

Math.round(Math.pow(13, 2))

Math.pow() function, in this case, returns the value of 13 raised to the power of 2.

Lastly, I have passed the variables to height and width properties. Therefore the height and width will change according to the newly assigned value and our triangle will grow in size! (～￣▽￣)～

     function grow() {
        var valueX = Math.round(Math.pow(13, 2));
        var valueY = Math.round(Math.pow(13, 2));

        triangle.animate(
          { height: valueY, width: valueX },
          {
            duration: 1000,
            easing: fabric.util.ease.easeInSine,
            onChange: canvas.renderAll.bind(canvas),
          }
        );
      }

Step 3 : Creating the shrink function

Similar to the previous step, we need to create another function so that the triangle shrinks in size.

The getScaledWidth() and getScaledHeight() return the scaled width and height of triangle after transformations.

Since I have divided it by 3, we are going to get a smaller value. As the denominator gets bigger, the fraction gets smaller. So, if we use 5 instead of 3, the returned value will be even smaller.

In order to make sure that the value is rounded to the nearest integer, we need to use Math.round().

      function shrink() {
        var shrinkX = Math.round(triangle.getScaledWidth() / 3);
        var shrinkY = Math.round(triangle.getScaledHeight() / 3);
        triangle.animate(
          { height: shrinkY, width: shrinkX },
          {
            duration: 1600,
            easing: fabric.util.ease.easeInSine,
            onChange: canvas.renderAll.bind(canvas),
          }
        );
      }

Step 4 : Using events!

The mouse related events handled by objects in FabricJS are mousedown, mouseup, mouseover and mouseout. We use the on() method because it allows an event to be hooked on to a particular instance.

So, whenever we move our mouse pointer over the triangle object, it will grow as a result of the grow function being called.

Whereas, the triangle will shrink when we move the mouse pointer out as a result of the shrink function being called.

   // grow function is called when mouseover event occurs
      triangle.on("mouseover", grow);

      // shrink function is called when mouseout event occurs
      triangle.on("mouseout", shrink);

After putting all the pieces together, our output will look something like this:

grow-shrink animation using FabricJS

Tada~ o(*￣▽￣*)o Our grow-shrink animation is ready! I hope this was a fun and easy exercise to follow. I hate making things too difficult. Feel free to play around with this!

Also, Happy Thanksgiving to those who celebrate! 😸 Wishing everyone a happy, abundant and amazing holiday season woohoo~ lol.