Search the Community

This is a strange one. I've tested at CodePen, where transformOrigin works as expected - but it doesn't work in a SharePoint webpart - which makes no sense because at the end of the day it's a canvas element in the browser. It would appear that when operating on shapes created through fabric.js within a SharePoint webpart, the transformOrigin is *always* at the top left of the shape - no matter how I try to instantiate, or set it (the end result - in codepen the shape rotates around it's center - as it should - but in a SharePoint webpart it rotates around the top left of the initial bounding box of the shape). Have you ever seen it before? Just for reference, here's the SharePoint test code (doing almost the same thing as the codepen test - in codepen I tried rect and path just to see if there was a difference) import * as React from 'react'; import type { ITestSharePointMenuProps } from './ITestSharePointMenuProps'; import * as fabric from 'fabric'; import { gsap } from 'gsap'; export default class TestSharePointMenu extends React.Component<ITestSharePointMenuProps> { private containerRef = React.createRef<HTMLDivElement>(); private canvasRef = React.createRef<HTMLCanvasElement>(); private canvas: fabric.Canvas | null = null; public componentDidMount(): void { if (this.containerRef.current && this.canvasRef.current) { const containerRect = this.containerRef.current.getBoundingClientRect(); // instantiate the fabric canvas, and make it the same size as it's container this.canvas = new fabric.Canvas(this.canvasRef.current, { backgroundColor: 'black', width: containerRect.width, height: containerRect.height, perPixelTargetFind: true }); // create a simple rectangle const test_rect = new fabric.Rect({ left: 100, top: 100, width: 100, height: 100, fill: "yellow", hasControls: false, hasBorders: false, }); this.canvas.add(test_rect); // when clicked, rotate the rectangle through 90 degrees test_rect.on("mousedown", () => { gsap.to(test_rect, { duration: 1, angle: test_rect.angle + 90, onUpdate: () => { this.canvas?.renderAll(); } }); }); } } public render(): React.ReactElement<ITestSharePointMenuProps> { return ( <div ref={this.containerRef} > <canvas ref={this.canvasRef}> </canvas> </div> ); } }

Ok my question is sort of related to this so just put it out there for reference: https://greensock.com/forums/topic/14782-exportimport-timelinestweens-to-json/ I have been using fabric.js with GSAP to create an app to make animations. I have run into a problem where i need to save animation in the db. I am saving my canvas as a JSON. Then the way i went about saving the saving the timeline is by just saving the whole timeline object. I think the saving is working (tell me if I am wrong?) but I think its the fact that the timeline doesn't see the reloaded canvas and its objects as the same. ?? If so what about the ideal solution here. Btw I am very new to GSAP and I am using for my project and love it so far. The fact that I am new I could be missing something very obvious and so far the forums have been helpful with the answers already up and now I am hoping someone can help me with my mine. Thanks in Advance. Regards, Mr P

Hi, I'm wondering whether I should be writing my own plugins for GSAP. I have two cases where this might be nice: 1) First I'm animating richmarkers on google maps. To animate latitude and longitude I must call setPosition. I can do this ok with onUpdate, but then if I'm also animating color, say, it starts to get a bit cumbersome. 2) In another project I'm using fabric.js. I notice you have a plugin for easel.js but not fabric. So for cases like this should I write my own plugin to make the syntax nicer? If so, are there any docs or examples on doing this? Thanks.