Dragging and Dropping an SVG line

[eranariel 0 Likes (Newbie)]

Hi,  

I am new to gsap . 

How do I set the  SVG  to correspond with the path coordinates ? Extruding (drag/drop) the line/path to a new position is  constrained from view by the width and height of the <svg> . I would like to connect the line endings  (circle classes) to other elements as drag and drop. 

 

See the codepen link, and tons of thanks in advance! 

 

See the Pen mdmQOBX by aran-ariel (@aran-ariel) on CodePen

[OSUblake 18,475 Likes (Superhero)]

Hi eranariel!

 

It looks like you're using an old version of GSAP. Please check out the Migration Guide.

 

You'll notice changes like this.

// old
element._gsTransform.x

// new
gsap.getProperty(element, "x")

 

After that, check out Draggable's docs and methods like hitTest.

 

[Cassie 5,122 Likes (Superhero)]

In terms of visually extending beyond the bounds of the SVG, you can set 'overflow:visible'

See the Pen 72bea7e864b205fb4dde68e357012c3d by cassie-codes (@cassie-codes) on CodePen

[eranariel 0 Likes (Newbie)]

On 8/7/2021 at 11:21 PM, OSUblake said:

/ old element._gsTransform.x // new gsap.getProperty(element, "x")

Blake,  

I have updated the code, however the line no longer appears . If I remove the TweenMax  script source,  the circles (endings) are no longer draggable, accordingly it is unclear where the code is referencing it.   If you could please have a look at the code, it would be greatly appreciated, thanks!

 

 

 

 

gsap3_revisions.html

[OSUblake 18,475 Likes (Superhero)]

You we're loading the old versions of GSAP and Draggable.

 

See the Pen eYWbeNJ by GreenSock (@GreenSock) on CodePen