Usage of CSSPlugin.registerSpecialProp in the right way

[RolandSoos]

I would like to implement my custom animatable property to be able to easily animate the filter: blur(10px) CSS property. Could you take a look at my example to confirm that I use CSSPlugin.registerSpecialProp as it intended?

 

 

 

Currently implemented for webkit only

See the Pen ybVQEr by anon (@anon) on CodePen

[RolandSoos]

Version #2

 

Do I need to add this check if the start and end value are the same to prevent not necessary property change?

            if(start == value){
                return function(){

                };
            }

CSSPlugin.registerSpecialProp(
        "n2blur",
        function (target, value, tween) {
            var start = 0,
                match;
            if ((match = target.style.webkitFilter.match(/blur\((.+)?px\)/))) {
                start = parseFloat(match[1]);
            }
            if(start == value){
                return function(){

                };
            }
            var diff = value - start;
            return function (ratio) {
                target.style.webkitFilter = "blur(" + (start + diff * ratio) + "px)";
            };
        },
        0
    );

[GreenSock]

Yep, looks pretty good to me (though of course it might be good to add conditional logic to handle prefixed and non-prefixed versions of the property). Good job. 

[RolandSoos]

Okay, I have added the conditions to handle prefixed and unprefixed browsers. It seemed for me that  that -moz -ms and -o prefixes are not used in any production release of the browsers...

    var blurProperty = false,
        element = document.createElement('div');
    if (element.style.webkitFilter !== undefined) {
        blurProperty = 'webkitFilter';
    } else if (element.style.filter !== undefined) {
        blurProperty = 'filter';
    }
    if (blurProperty) {
        CSSPlugin.registerSpecialProp(
            "n2blur",
            function (target, value, tween) {
                var start = 0,
                    match;
                if ((match = target.style[blurProperty].match(/blur\((.+)?px\)/))) {
                    start = parseFloat(match[1]);
                }
                if (start == value) {
                    return function () {

                    };
                }
                var diff = value - start;
                return function (ratio) {
                    target.style[blurProperty] = "blur(" + (start + diff * ratio) + "px)";
                };
            },
            0
        );
    }