Jump to content
Search Community

GSAP 3 plugin with overwriteProps

RolandSoos test
Moderator Tag

Recommended Posts

Hi,

I would like to migrate my custom GSAP V2 plugins to V3. Do you have documentation about plugin structure for V3? Could you point me in the right direction?

 

I used overwriteProps in V2 to define custom properties.

 

Here is how my plugin looked like for V2:

    var _div = document.createElement("div"),
        _filterProp = /Edge\/\d./i.test(navigator.userAgent) ? false : (_div.style.filter !== undefined) ? "filter" : (_div.style.webkitFilter !== undefined) ? "webkitFilter" : false,
        _filterCSSProp = _filterProp ? (_filterProp == 'filter' ? _filterProp : '-' + _filterProp.replace(/([A-Z])/g, "-$1").toLowerCase()) : "";
    GSAP._gsDefine.plugin({
        propName: "myblur",
        API: 2,
        version: "1.1.0",
        overwriteProps: ["myblur"],
        init: function (target, value, tween, index) {
            if (!_filterProp) { //browser doesn't support filters
                return true;
            }
            if (typeof (value) === "function") { //accommodate function-based values
                value = value(index, target);
            }
            var start = "blur(0px)",
                end = "blur(" + value + "px)";
            this._style = target.style;
            this._remove = !value;
            if (start !== end) {
                this._addTween(target.style, _filterProp, start, end, "myblur");
            }
            return true;
        },
        set: function (ratio) {
            this._super.setRatio.call(this, ratio);

            if (ratio === 1 && this._remove) {
                this._style.removeProperty(_filterCSSProp);
            }
        }
    });
    GSAP._gsDefine.plugin({
        propName: "myAutoAlpha",
        API: 2,
        version: "1.0.1",
        overwriteProps: ["myAutoAlpha"],
        init: function (target, value, tween, index) {
            var start = target.style.opacity || 1;
            this._target = target;
            this._style = target.style;
            this._tween = this._addTween(target.style, "opacity", start, value, "myAutoAlpha");
            if (!this._tween) {
                this._opacity = start;
            }
            return true;
        },
        set: function (ratio) {
            this._super.setRatio.call(this, ratio);
            if (!this._tween && this._opacity !== this._style.opacity) {
                this._style.opacity = this._opacity;
            }
            if (this._style.opacity === "0") {
                (this._target.relatedLayer || this._target).setAttribute('data-force-hidden', '');
            } else {
                (this._target.relatedLayer || this._target).removeAttribute('data-force-hidden');
            }
        }
    });

 

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