Jump to content
GreenSock

qualityCode

Tween location not syncing with Draggable on svg

Go to solution Solved by GreenSock,

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 am using pan/zoom to zoom/pan to an element in an svg, which works great the first time.  Then after dragging it, it will not position correctly again.  

 

To pan/zoom I tween the viewBox using values from the element's getBBox(). Is it possible to sync the draggable plugin with the tween library when tweening the viewBox?  Would it help to create a child svg, and tween that and drag the parent svg?

 

I have tried many ideas from the forum, including clear(), onUpdate.

See the Pen bpYeNL by AlmaTheYounger (@AlmaTheYounger) on CodePen

Link to comment
Share on other sites

  • Solution

If I understand your goal properly, I think you just need to animate the "x" and "y" back to 0, that's all:

http://codepen.io/anon/pen/LNOxRG?editors=1010

 

Remember, Draggable is altering the x/y when the user drags, so if you want it to return to its original position, just animate those back to 0. Does that help?

  • Like 3
Link to comment
Share on other sites

Thanks.  That worked, and so simple.  I don't understand why there is no need to call Drag.update();

Link to comment
Share on other sites

Draggable's update method basically updates the value the Draggable instance has stored. For example if you create a Draggable instance and before/after Dragging it you change the x and/or y values, the update method tells Draggable about that change, otherwise Draggable believes that the values are still the ones when it got instantiated.

 

http://greensock.com/docs/#/HTML5/Drag/Draggable/update/

  • Like 2
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.
×