Problems with rotation when using gsap with fabric.js in a SharePoint React WebPart

[Jonathan Beckett]

I've been tinkering with fabric.js in a SharePoint React webpart today, which worked fine - allowing me to render shapes. I added gsap to test animating shapes, and for basic movement of shapes it worked straight away. However - if I use the "rotation" property, it immediately throws "Invalid property", and "Missing Plugin" errors. I've narrowed it down specifically to rotation - moving shapes around, and easing them seems to work perfectly. Here the core code of the component in the webpart:
 

import * as React from 'react';
import type { IMySharePointMenuProps } from './IMySharePointMenuProps';
import * as fabric from 'fabric';
import { gsap } from 'gsap';

export default class MySharePointMenu extends React.Component<IMySharePointMenuProps> {

  private canvasRef = React.createRef<HTMLCanvasElement>();

  private canvas: fabric.Canvas | null = null;

  public componentDidMount(): void {
    
    if (this.canvasRef.current) {

      // instantiate canvas
      this.canvas = new fabric.Canvas(this.canvasRef.current, {
        backgroundColor: 'lightgray'
      });

      // create a rectangle
      const rect = new fabric.Rect({
        left: 100,
        top: 100,
        width: 30,
        height: 30,
        fill: 'blue',
        angle: 0,
        hasControls: false
      });

      // add the rectangle to the canvas
      this.canvas.add(rect);
      
      // render
      this.canvas.renderAll();    

      // add a click handler to the rectangle
      rect.on('mousedown', function(options){

        // when clicked, animate the rectangle to a new location, and rotate it
        gsap.to(rect, {
          duration: 2,
          left: 200,
          top: 100,
          rotation: 45,
          ease: "power1.inOut",
          onUpdate: () => {
            if (this.canvas) {
              this.canvas.renderAll();
            }
          },
          onComplete: () => {
            // do something else
          }
        });

      });
      
    }

  }

  public render(): React.ReactElement<IMySharePointMenuProps> {
    return (
      <div>
        <canvas ref={this.canvasRef} style={{ width: 500 , height: 500 }}></canvas>
      </div>
    );
  }

  // Clean up the canvas object
  public componentWillUnmount(): void {
    if (this.canvas) {
      this.canvas.dispose();
      this.canvas = null;
    }
  }

}

Any ideas what's causing it ?

[akapowl]

 

Hello Jonathan, welcome to the forum.
 

58 minutes ago, Jonathan Beckett said:

Any ideas what's causing it ?

It's rather simple - there is no key named 'rotation' on that rect object you are animating.
You can rather easily check that yourself via some simple console.log() of the object.

 

What the object does have on the other hand, is a key named 'angle' which is probably what you want to target when going to animate the rotation of your rect.

Here's a demo showcasing what I mean with the above. I hope this will help. And by the way; next time you have a question, please be so kind to include a minimal demo of your own, so people helping won't have to put in the extra effort to do that themselves - thanks!

See the Pen xbxbaKr by akapowl (@akapowl) on CodePen.

 

[Jonathan Beckett]

Interesting... reading the docs, I thought fabric used .angle, and gsap used .rotation - so you're saying I can target a different angle in the gsap.to command, and it will do the tweening towards it?  I'll have a look in the morning - thanks 

[akapowl]

16 minutes ago, Jonathan Beckett said:

Interesting... reading the docs, I thought fabric used .angle, and gsap used .rotation

GSAP can interpolate any numerical values that are available on any given object.

Put in simple terms, GSAP uses 'rotation' internally in its CSS Plugin to target the 'rotate()' value of the transform property on DOM elements, because (but not only because of that) it has the benefit of a much sleeker API - imagine the 'horror' of having to fully write out any transform property everytime you'd want to tween on any of those.

But you are not targetting any DOM element properties, but keys on objects created by fabric instead - so logically you can only target any key available on that given object. GSAP couldn't possibly know or guess the specific key name used for something by any 3rd party library, that's just not possible. If they chose that for rotations they want to use the name 'angle' then that is what you'll have to go with.
 

[Jonathan Beckett]

Curiosity got the better of me - fired the work computer back up and tried it - worked perfectly - thankyou! (and a great insight into how it actually works - which helps enormously).