Simple smooth pinch/pan gesture events for <div> tags

Question

Hello all,

I have an app with a photo viewing feature, and I am hoping to add pan, scale, and possibly even rotate features. Currently, I accomplish this through MSGesture (see here). However, on the iOS and Android OSes, it is extremely easy to show an image and enable smooth panning/zooming gesture features with animations. The implementation I have above is barebone and will require a ton of CSS programming before it is ready for production (e.g. if the user zooms out too much, pans too far in a direction, an animation will show to bring it back to the center). Before I do so, I would like to ask: is there is a simpler method of doing so, as there is on the other platforms?

It should be noted that the IE metro app has exactly what I'm looking for.

Answer 1

Hi

You can try the Animation Library here:

http://msdn.microsoft.com/en-us/library/windows/apps/hh465165.aspx

The Animation Library does not provide animations for every possible scenario and there are cases where you might wish to create a custom animation to reflect your brand. You should be thoughtful about where you diverge from the Animation Library animations. Only do so if there is a well-defined reason, such as for a special brand moment or if there is no Animation Library animation to suit the scenario.

For example code using the APIs discussed in this topic, see the HTML animation library sample.

Answer 2

I took a look at those, but they don't seem to match what I'm looking for. Isn't there a simple solution that doesn't involve creating CSS rules and playing with gesture classes? 

I did see one thing which somewhat solved my problem: If I set overflow-x and overflow-y both to auto, and make the width of the image slightly bigger than its enclosing DIV, then I get the desirable panning animations. However, this does not seem like a valid permanent solution, and doesn't solve the problem of zooming. Is there a similar solution for scaling?

Answer 3

I have found a sample which has solved my problem perfectly, the HTML scrolling, panning and zooming sample.