I recently came across this magnificent Edge composition by user heathrowe: http://www.heathrowe.com/edge/beforeafter/beforeafter.html
I plan on using a similar thing on my site. Problem is that it isn't responsive. In Edge I have tried setting "Responsive scalling" to "on", but then the composition isnt working right.
See example here: http://chri789z.mmd.eal.dk/dragger/dragme.html
My project example: http://chri789z.mmd.eal.dk/example.zip
Anyone got any suggestions?
So part of the reason is that there's a lot of dynamic calculation that's happening when we turn on responsive scaling. You'll want to adjust the offset that you calculate by the scaling offset. This is non-trivial, unfortunately, and I'd have to ask to see how we represented this internally.
When you have selected 'responsive scaling' for your project you will have to account for scale value set for stage before setting the clip right value.
Here is the modified code that does that :
var directionX = e.pageX - (clipper.offset().left);
var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,
matches = sym.$("#Stage").css('-webkit-transform').match(matrixRegex);
//matches is the scaleX value set to stage on selecting responsive scaling.
var scaleX = directionX/matches;
clipper.css('clip','rect(0px '+scaleX+'px 522px 0px)');
Hope this helps