Jump to content
Search Community

Scaled draggable snapping

rag 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

Hi guys,

I want to make an 'endless' list that is draggable. Each list element needs to snap in the center of the screen. I got those parts working with throwprops' snaps and a proxy element.

Now the whole thing also needs to be zoomable. That works too, but the snapping stops working when zoomed out. I can't figure out what parts I have to scale myself and what parts TweenMax scales for me. I set up this pen, im sure you will get where I want this to go:

 

 

I put a green line in the center so you can easily see when an element is centered. The center of the element in the middle should always line up with the green line. In zoomed out mode that doesn't work. The calculated offsets are shifted. I suspect it has to do with the update function, in line 60 i subtract the double list width, but that isn't updated to the new zoomed out size. If I do changed it to that, the list will be in a wrong position after the zooming animation.

Any ideas?

Thanks

Moriz

See the Pen XNRrog by mbuesing (@mbuesing) on CodePen

Link to comment
Share on other sites

The problem is if I do that, the first call to update() after the zooming animation will move the whole thing by a couple thousand pixels at once because the listWidth will all of a sudden only be a third of what it was before.

Link to comment
Share on other sites

I think some your calculations might be a little off to begin with. I added a outline to where the center is, and it's not stopping on it, nor is it consistent.

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

 

Is your code based on some of the demos from this thread?

http://greensock.com/forums/topic/14916-loop-draggable-carousel/

 

If you set your code up like I did using the ModifiersPlugin on a paused animation, it should work out regardless of the scale. Scaling something uniformly does not change the geometry. I think how you position/center your list might be messing some of your calculations up.

 

I just quickly modified one of my demos to scale the boxes. Notice how the snapping still works out the same. The only adjustment I made is changing the left position, which I multiply by the current scale value.

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

 

 

 

BTW, you're using some outdated versions of GSAP. The "latest" version isn't updated anymore. Make sure there is a version number in the url like this.

https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js
http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/utils/Draggable.min.js

.

  • Like 1
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...