Jump to content
Search Community

Refresh Draggable child overflow size after content resize

KenBkk test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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. 


 

Link to comment
Share on other sites

Hi KenBkk :)

 

Welcome to the GreenSock forum.

 

I'm not sure I completely follow the question based on your description. If you could put together a CodePen demo for us, I'm sure we can point you in the right direction. For more info about that, please see Carl's blog post:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks and happy tweening.

:)

Link to comment
Share on other sites

Yep - I'm a little confused as to the desired outcome here too. 

 

If you're trying to scale an image and drag it around that square, you could try creating a div as your draggable rather than your image and then use that image as the background of the div. Your buttons could then change the size of the background image, but the div size wouldn't change at all.

 

Another CodePen you may want to look at for ideas would be Blake's cool Magnifying Effect:

 

See the Pen wWJoQg by osublake (@osublake) on CodePen

 

That's all I can think of at the moment. If you can elaborate more about the desired behavior, we may be able to offer more advice.

 

Happy tweening.

:)

Link to comment
Share on other sites

Forgot about this. You can update the bounds on a draggable by passing in true to the update() method. See how the scrollbar goes away.

See the Pen BpZpEY?editors=0010 by osublake (@osublake) on CodePen

 

But based on that example you linked to, I'm guess you're trying to do panning. Here's a simple example of how to do that. I'm not hiding the overflow so that you can see how it's working with the bounds.

See the Pen 7cde46943741799d4fcb3ae5e2658def by osublake (@osublake) on CodePen

 

Here's a more complete demo of that with stable zooming (zoom to point). You can click or you use your mouse wheel to change the zoom level.

See the Pen 88569ec9d04019b45890fe2a5f86f07d by osublake (@osublake) on CodePen

 

 

.

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

I didn't test this out, but see if this fixes the click issue. I added a check for touches, which might be problem.

See the Pen 7acc1b2027f03d3e7395f79ba22ac9ec?editors=0010 by osublake (@osublake) on CodePen

 

For pinch and zoom, I've honestly never tried that, but you'd probably have to call disable or endDrag on the draggable instance if that gesture is detected.

 

For the point to use for the stable zoom, you'd have to find the midpoint between the 2 touches. Right now I only have 1 global point, so you need to add logic to possibly handle a second global point. The midpoint would be the average of those 2 points, so something like this...

var globalX1 = pointer1.clientX - rect.left;
var globalY1 = pointer1.clientY - rect.top;

var globalX2 = pointer2.clientX - rect.left;
var globalY2 = pointer2.clientY - rect.top;

var worldX = (globalX1 + globalX2) / 2;
var worldY = (globalY1 + globalY2) / 2;

var localX = (worldX - x) / scale;
var localY = (worldY - y) / scale;

.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...