jqueryプラグインhammer.jsの記述で理解が正しいか、解決策はあるか

Question

hammer.js
https://hammerjs.github.io/

上記を使用し、動かせる要素の大きさをピンチイン、アウトで変えられるようにしたいと思っています。ネットでいただいたコードをもとに勉強していますので、
1．コードに対する私の理解が正しいか判定をお願いします。
ただしhammerのパンはもっさりしているので、パンに関してはjquery.pep.jsを使いたいです。非常にぬるぬるで気に入っています。これを複合した時にうまく動かない状態（後述）があるので、
2．解決策があれば教えてください。

<div id="panPinch">
	<img class="pep" id="panPinchElm" src="img/1.jpg" style="height:100px; z-index:2;">
	</div>

理解が正しいか判定してほしいコードは以下。

var $tgPanPinchArea = document.getElementById(area_id),
            $jqTgPanPinchArea = $($tgPanPinchArea),
            $tgPanPinchElm = document.getElementById(elem_id),
            $jqTgPanPinchElm = $($tgPanPinchElm),
            $hammerObj = new Hammer($tgPanPinchElm),
            $hammerObj2 = new Hammer($tgPanPinchArea),
            pinchTime = false,
            $pinchTimer = {};
        $hammerObj.get("pinch").set({ enable: true });
        $jqTgPanPinchElm.css("transform", "scale(1)");

$hammerObj.on("pinch", function (event) {
            event.preventDefault ? event.preventDefault() : (event.returnValue = false);
            if (!pinchTime) {
                //start
                pinchTime = event.timeStamp;
                var preScale = String($jqTgPanPinchElm.css("transform")).replace("matrix(", "");
                preScale = preScale.replace(")", "");
                preScale = preScale.split(",");
                preScale = Math.sqrt(preScale[0] * preScale[0] + preScale[1] * preScale[1]);
                $jqTgPanPinchArea.data("preScale", preScale).data("scale", event.scale);
            } else {
                //move
                if ($pinchTimer) clearTimeout($pinchTimer);
                $jqTgPanPinchElm.css("transform", "scale(" + ($jqTgPanPinchArea.data("preScale") + (event.scale - $jqTgPanPinchArea.data("scale"))) + ")");
                $pinchTimer = setTimeout(function () {
                    //end
                    pinchTime = false;
                }, 100);
            }
        });

ピンチイベントが始まったタイミングで、先にhammerに紐づけしている$jqTgPanPinchElmのtransform内容を取得。中身を「、」「）」等余計なものを整形し、scaleとして正式に取得。要素の土台となっている$jqTgPanPinchAreaにprescaleやscaleといったプロパティ（？）を与え、そこに実際の数値を入れてあげる。
ピンチイベントが終わったら、元の座標に「動いた（event）分のscaleから元のscaleを引いた数値」（つまり拡大縮小した分）を足して、それを要素のcssのtransformのscaleに返してあげる。

以上のような認識でよいでしょうか。判定をお願いします。

以下は抱えている問題。
イメージ的には、台の上に要素があり、ピンチによる大きさ変更は台の目盛りに依存していると考えています。ところがパン動作を別プラグインのpepに任せると、移動した後の台上の目盛りがjquery内の属性キャッシュにない状態なので、移動後ピンチ動作をすると小刻みに今の場所と元の場所をワープし続ける描写になってしまいます。

pepで移動した後、その状態の座標（？）、台の目盛り（？）をプッシュすればよいかとも思いましたが、pepの記載方法が

$(document).ready(function(){
        $('.pep').pep();
      });

だけなのでお手上げでした。

上記の私の理解が正しければピンチインアウトは土台となるエリアに依存しますが、依存しないor上記を修正でなにかよい方法はありますでしょうか。
よろしくお願いします。