How to animate objects using FabricJS?

4 min readNov 22, 2022

FabricJS allows us to add animation to objects in the canvas by using the animate method.

animate( property: String | Object, value: Number | Object ): fabric.Object

// property - Defines the property that we want to animate eg: Properties like left, top, angle etc.

Animating an object — the basics

Let’s see how we can create a simple animation of making a circle object invisible by using the animate() method.

The first argument in this case shall be the opacity property which allows us to control the opacity of an object. If we pass it any value lesser than 1, then our object will appear translucent. Whereas, if we pass it a value of 0, our object will be completely invisible!

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

      // Initiate a circle object
      var cir = new fabric.Circle({
        top: 80,
        left: 50,
        radius: 50,
        fill: "#8db600",
        stroke: "rgba(86,130,3,0.6)",
        strokeWidth: 4,
        selectable: false,
      });

      // Making the circle invisible
      cir.animate("opacity", 0, {
        duration: 5000, // default = 500ms
        easing: fabric.util.ease.easeOutBounce,
        onChange: canvas.renderAll.bind(canvas),
      });

      canvas.add(cir);

From the example above, you can see that there is also a third argument.

The third argument is present so that we can go really in-depth and tailor the animation to as close as we envisioned it. It allows us to control properties like easing, duration, callbacks etc.

The easing options that we can use are as follows:

easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInBounce
easeOutBounce
easeInOutBounce
easeInBack
easeOutBack
easeInOutBack

And the list goes on……. In case you want to know more about easing, you can check this out.

That was a LOT. 😭

Coming back to the third argument, you can see that in our example I have passed canvas.renderAll.bind(canvas) to the onChange callback. This is because animate function does not re-render the canvas after each change.

Consider that the animate function would render the canvas after each and every change. Then, if we had 500 objects in our canvas and we wanted to animate them differently for different durations, the animate function would have to re-render the canvas 500 times and our canvas would be a hot-mess.

So, we can say that not re-rendering the canvas every time an animation occurs actually saves us from a lot of performance related issues.

So, now that we have a good hold of the basics, let’s move on to something a bit more advanced.

Creating a custom animation for a polyline object

To be completely honest, I don’t even know what I can call this ㄟ( ▔, ▔ )ㄏ

However, this example is meant to be a guide that can help you to create your own animation. Take this as a guide and then implement in a different fashion that might be a more standard form of using animations for websites.

<!DOCTYPE html>
<html>
  <head>
    <!-- Adding the FabricJS library -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/521/fabric.min.js"
      integrity="sha512-nPzvcIhv7AtvjpNcnbr86eT6zGtiudLiLyVssCWLmvQHgR95VvkLX8mMpqNKWs1TG3Hnf+tvHpnGmpPS3yJIgw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>
  <body>
    <!--This is a button-->

    <button
      onclick="animateMyPolyline()"
      style="
        background-color: #b0c4de;
        padding: 4px;
        text-align: center;
        color: black;
        margin: 4px;
        border-style: none;
        font-weight: bold;
        border-radius: 3px;
      "
    >
      Button
    </button>
    <canvas
      id="canvas"
      style="border: 2px solid black"
      width="400"
      height="300"
    ></canvas>

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

      // Initiate a shadow object
      var shadow = new fabric.Shadow({
        color: "white",
        blur: 7,
        offsetX: 20,
        offsetY: 20,
      });

      // Initiate a polyline object
      var polylineObj = new fabric.Polyline(
        [
          { x: 90, y: 60 },
          { x: 84, y: 155 },
          { x: 49, y: 154 },
          { x: 122, y: 80 },
        ],
        {
          top: 80,
          left: 50,
          fill: "#9bddff",
          shadow: shadow,
          selectable: false,
        }
      );

      // creating a function named animateMyPolyline()
      function animateMyPolyline() {
        polylineObj.animate("left", polylineObj.left === 50 ? 275 : 50, {
          duration: 1000,
          easing: fabric.util.ease.easeOutCirc,
          onChange: canvas.renderAll.bind(canvas),
        });
        polylineObj.animate("angle", polylineObj.angle === 0 ? 60 : 0, {
          duration: 1500,
          easing: fabric.util.ease.easeInCirc,
          onChange: canvas.renderAll.bind(canvas),
        });
      }

      canvas.add(polylineObj);
    </script>
  </body>
</html>

You can see from the gif that I have created a button, which when clicked, sets off the animateMyPolyline() function.

If you want to know the details about how I created a Polyline object with added shadow on the canvas, click here.

So, this is it for todays article! In the next one we shall see even more animation. Till then see ya~

How to animate objects using FabricJS?

Animating an object — the basics

Creating a custom animation for a polyline object

Written by Mandev