Create simple animations using FabricJS

Previously we saw how we can create objects with added animation by using FabricJS.

In this article we shall see even more examples related to that.

I am feeling horrible today so this article may be a mess. Please bear with me.

≡(▔﹏▔)≡

Making a circle invisible by hovering over it

In the code example below, you can see that I have used the on() method and attached the mouse:over and mouse:out event handlers to the canvas.

This means that whenever we move our mouse over the circle object in the canvas, a function is going to be executed. Inside the on() method, the second argument is an arrow function, the one that looks like this:

(param) => {

statements

}

The statements inside the arrow function are exactly what we need to animate the circle object on the canvas.

So we pass the instance of fabric.Circle to the animate method and make the required configurations to animate it. The result would be a fade-in fade-out animation on hovering over the circle object.

You can click here to see the logic behind opacity change. It is the first example from my previous article.

      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
      canvas.on("mouse:over", () => {
        cir.animate("opacity", 0, {
          duration: 1000, // default = 500ms
          easing: fabric.util.ease.easeOutCubic,
          onChange: canvas.renderAll.bind(canvas),
        });
      });

      canvas.on("mouse:out", () => {
        cir.animate("opacity", 1, {
          duration: 1000,
          easing: fabric.util.ease.easeInCubic,
          onChange: canvas.renderAll.bind(canvas),
        });
      });

      canvas.add(cir);

See how the circle becomes invisible when we hover over it?

You can Animate Text as well

Just as you’d expect, the animate method allows us to animate pretty much any object on the canvas.

In this example, I have initiated an instance of fabric.Textbox but you can create similar effects with IText or Text as well.

If you want to know the basics of adding Text to the canvas, click here.

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

      // Initiate a Textbox object
      var text = new fabric.Textbox("Let them eat cake 🍰", {
        top: 80,
        left: -100,
        width: 300,
        fill: "#b22222",
        stroke: "#da1d81",
        strokeWidth: 2,
        selectable: false,
        fontWeight: "bold",
        fontSize: 30,
      });

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

      canvas.on("mouse:down", () => {
        // Animating the text as soon as mousedown event occurs

        text.animate("angle", text.angle === 0 ? 45 : 0, {
          duration: 1000,
          easing: fabric.util.ease.easeOutSine,
          onChange: canvas.renderAll.bind(canvas),
        });
        text.animate("top", text.top === 80 ? 95 : 80, {
          duration: 700,
          easing: fabric.util.ease.easeInSine,
          onChange: canvas.renderAll.bind(canvas),
        });

        text.animate("left", text.left === -100 ? 50 : -100, {
          duration: 100, // default = 500ms
          easing: fabric.util.ease.easeInSine,
          onChange: canvas.renderAll.bind(canvas),
        });
      });

The animation will occur only when we click on the text ie., when the mouse button is pressed down!

You can refer this article in case you are new to FabricJS.

I hope todays article wasn’t too lame. Stay healthy everyone~