Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
thunderkid

Plugins: should I write my own?

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. 

Recommended Posts

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.

Link to comment
Share on other sites

Yeah, plugins are great when you need to tween properties that contain more than just basic numeric values. 

 

We offer a plugin template that has detailed comments to help you along: https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/plugins/TEMPLATE_Plugin.js

 

However, if your objects have matching set and get functions like getX() / setX() or getRotation() / setRotation(), GSAP is smart enough to allow you to tween the set functions like:

var message = document.getElementById("message");


var obj1 = {
    position: {x:0, y:0},
    setX: function(val) {
          this.position.x = val
        },
    getX: function() {
          return this.position.x;
        }
 };


//tween the setX() value
TweenLite.to(obj1, 2, {setX:200, onUpdate:function() {
  message.innerHTML = obj1.position.x
}});

http://codepen.io/GreenSock/pen/c9538ed6375c49d8190b8fd2dd88c375?editors=001

 

 

Also if you have a single setter/getter function that can set or get a value based on the presence of an argument you can use that too!

var message = document.getElementById("message");


var obj1 = {
    position: {x:0, y:0},
    positionX: function(val) {
        if (arguments.length === 0) {
            //get
            return this.position.x;
        } else {
            //set
            this.position.x = val
        }
    }
};
//tween the positionX() function 
TweenLite.to(obj1, 2, {positionX:200, onUpdate:function() {
  message.innerHTML = obj1.position.x
}});

http://codepen.io/GreenSock/pen/3236625f134a45abcea513b14447b2b7?editors=101

 

Just sharing this so that you know that just because other libraries may set values via functions, it doesn't mean they can't be used in tweens. 

However it gets more complicated if something like setPosition() requires or returns both x and y values. 

  • Like 7
Link to comment
Share on other sites

 

 

...it gets more complicated if something like setPosition() requires or returns both x and y values. 

Thanks, that's a nice technique. But unfortunately setPosition with two values is what I need for setting map positions. Is there an example of how to do this, with > 1 dimensions being tweened? I tried taking your pen and implementing setXY / getXY, hoping to tween on the two coords simultaneously, but that doesn't seem to work:

See the Pen XmJYrp?editors=001 by thunderkid (@thunderkid) on CodePen

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.
×