KenBkk

Oh, wow. That's a much better and bigger answer than I expected. I see 2 issues though: 1. Click location seems not to be working on iPhone (6) so the zoom happens from top left corner regardless of where I click/tap. 2. How do I incorporate pinch/zoom on smartphones? I know hammer.js adds support recognizing those events but how is that added into GSAP?

In the long run I want to reach this kind of behavior: http://www.asos.com/asos/asos-stripe-top-with-ruffle-front-tie-waist/prd/7336893

I've created a new demo that shows the issue: Update: http://codepen.io/KenBKK/pen/LxWLEp The desired result is to be able to change the content / size inside draggable and make it dragglable / scrollable with both mouse and touch without overscrolling.

http://codepen.io/anon/pen/WRpNby I hope I did it right. It's my first CodePen

I'm trying to use draggable for zooming in and pan pictures. When I zoom out the picture with scale TweenLite.set(image, {scaleX:0.5, scaleY:0.5}) then the scrollable overflow size remains the same. Example: Draggable is 200x200px The picture is originally 1000x1000px, so the initial overflow area is 1000x1000px. After scaling the picture becomes 500x500px but scrollable/draggable remains 1000x1000px. The picture has a 250px margin around is and now I can drag the picture out of sight. What I want is that the overflow area collapses to 500x500px. I tried skipping scale and set height. Then the scrollable overflow height adapts but not the width. I can drag the image out of sight. In source code I see that then dynamically inserted <div> has a padding-right that causeses this. How can I fix this? I'm scratching my head for hours now.