Jump to content
Search Community

FabricJS Plugin?

Praney Behl test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

How would you like Fabric.js Plugin for GSAP?  

22 members have voted

  1. 1. Fabric.js is a powerful and simple Javascript canvas library. Have you tried it?

  2. 2. Would you be interested in seeing a GSAP Fabric.js plugin to handle it even easily?



Recommended Posts

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

Link to comment
Share on other sites

  • 1 year later...
  • 2 years later...

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

 

  • Like 2
Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

  • 5 years later...

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.

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...