FabricJS Plugin?

[Praney Behl 20 Likes (Newbie)]

Hi,

 

I have been playing with the Fabric.js library for a little while. What like about it is the ease of transforming objects and a couple more.

 

I am wondering if there is a plugin for Fabric.js available with GSAP? If not then how to use Fabric.js like transformations(at http://fabricjs.com/customization/)  in Kinetic.js?

 

Thanks in advance,

Praney

[GreenSock 18,243 Likes (Superhero)]

We don't have any plans to create a fabricjs plugin at this point, but it very well could happen in the future if enough people are interested.

[Praney Behl 20 Likes (Newbie)]

Thanks Jack,

 

Maybe we can start a poll to find out how many others are interested.

[Praney Behl 20 Likes (Newbie)]

All right just added a poll to this thread for anyone to vote if they are interested in Fabris.js plugin.

 

Cheers!

[Chrysto 143 Likes (Specialist)]

I think TransformManager JS would be better than FabricJS plugin  

[Praney Behl 20 Likes (Newbie)]

Well if we can get TransformManager JS then there is nothing better than that.

[Eduardo Paez 0 Likes (Newbie)]

Actually I work with TransformManager (Flash) and since 2013 I was wondering a TransformManager JS. If it's connected with GSAP it will be the best HTML5 tool

[GreenSock 18,243 Likes (Superhero)]

Maybe we'll create that someday, but there are tons of other things on our to-do list with the animation platform that are a higher priority for now

[EricMtl 1 Likes (Newbie)]

.

 

[EricMtl 1 Likes (Newbie)]

Forget it !

I also asked for it  3 years ago  and got the same answer...

 

So sad !

 

 

 

[OSUblake 18,474 Likes (Superhero)]

Hi @EricMtl

 

Are you asking about a transform manager? I don't know what's on GSAP's roadmap, but I seriously doubt that would be on there. What's it supposed to work with e.g. HTML, SVG, canvas, a canvas library? That's a pretty tall order making it work cross-platform with different types of content.

 

Fabric.js already does that out of the box, but for canvas. If you're looking for something with HTML, maybe this demo will give you some ideas. It uses GSAP's Draggable, and some simple vector math to rotate and scale an object.

 

See the Pen gGLLOa by osublake (@osublake) on CodePen

 

[EricMtl 1 Likes (Newbie)]

Thx OSUBlake !

Pretty interesting  proof of concept.

But as Chrysto and surely many others users, we miss TM for a while...

 

 

 

 

 

[OSUblake 18,474 Likes (Superhero)]

I feel your pain. I've searched all over for something similar, but haven't found anything outside of Fabric.js. It was definitely much easier when GreenSock only had to worry about one platform, Flash. Now it's much more complicated when you throw HTML, SVG, and canvas into the mix.

 

[iongion 9 Likes (Newbie)]

5 years after - having similar issues.

So far, the problems I seen emerging are when creating custom objects in fabricjs with custom properties.

Here is my attempt at a plugin.

 

All properties should be updated in fabric using `set(key, value)` - some of them work directly through `fobj.prop = value` - but if one subclasses `fabric.Object` and decorates it with a custom property, gsap won't interpolate it. I actually don't know why.

Here is my attempt at solving this - using a Proxy - intercept calls and then use the fabric way of setting / getting properties.

But it is ugly as then props must be placed in the plugin registered key like this

 

      anim.to(pi, {
        fabric: {
          progress: 75,
          top: 20,
        },
        duration: 3,
        ease: "none",
        onComplete: () => {
          pi.setCoords();
        },
      });

 

And here is the ugly plugin  - hopefully another human in 5 years from now will find it useful.

 

/* eslint-disable */

let gsap,
  _coreInitted,
  _win,
  _fabricjs,
  _windowExists = () => typeof window !== "undefined",
  _getGSAP = () => gsap || (_windowExists() && (gsap = window.gsap) && gsap.registerPlugin && gsap),
  _warn = (message) => console.warn(message),
  _initCore = (core) => {
    gsap = core || _getGSAP();
    if (_windowExists()) {
      _win = window;
    }
    if (gsap) {
      _coreInitted = 1;
    }
  };

export const FabricJSPlugin = {
  version: "3.11.3",
  name: "fabric",
  init(target, value, tween, index, targets) {
    if (!_coreInitted) {
      _initCore();
      if (!gsap) {
        _warn("Please gsap.registerPlugin(FabricJSPlugin)");
      }
    }
    this.target = new Proxy(target, {
      get(obj, key) {
        return obj.get(key);
      },
      set(obj, key, val) {
        obj.set(key, val);
        return obj;
      },
    });
    let p, end;
    for (p in value) {
      end = value[p];
      if (this.target[p] != null) {
        this.add(this.target, p, "get", end);
      }
    }
  },
  register: _initCore,
};

FabricJSPlugin.registerFabricJS = (fabricjs) => {
  _fabricjs = fabricjs;
};

_getGSAP() && gsap.registerPlugin(FabricJSPlugin);

export { FabricJSPlugin as default };

 

Thank you guys, for such awesome tools and libraries.