Applying custom transforms to the Side Menu

ionic-v1
1

I’m trying to implement something like this side menu animation:

But I can’t get it to work in my app. The following directive does work (take from another example I found on here), but it has a distinct “slide to the right” effect before the shrink and rotate kicks in:

.directive('shrink', function($timeout) {
    return {
        restrict: 'A',
        link: function($scope, $element, $attr) {
            // Run in the next scope digest
            $timeout(function() {
                // Watch for changes to the x var which is a value between 0 and 275

                $scope.$watch('sideMenuContentTranslateX', function(x) {
                    if (x > 10) {
                        console.log("x value: "+x)
                        $element[0].style.webkitTransform = 'perspective(600px) scaleY(0.7) scaleX(0.7) translateX(-90px) rotateY(-25deg)';
                    }
                });
            });
        }
    }
});

So trying to get rid of the initial slide, I use the directive from the Plunker above:

.directive('shrink', function($timeout) {
    return {
        restrict: 'A',
        replace: false,
        link: function($scope, $element, $attr) {
            // Run in the next scope digest
            $timeout(function() {
                // Watch for changes to the openRatio which is a value between 0 and 1 that says how "open" the side menu is
                $scope.$watch('sideMenuController.getOpenRatio()', function(ratio) {
                    // Set the transparency of the fade bar
                    $element[0].style.webkitTransform += " perspective(500px) translateX(" + (Number(ratio) * 250) + "px) rotateY(-" + (Number(ratio) * 15) + "deg)";
                });
            });
        }
    }
});

But this does nothing at all - I just get the default menu animation. Any ideas what might be going on?