Updating SVG Node Positions Via Wiggles

[SammyC123]

Hi guys!

 

I'm trying to combine two examples I've seen - one where SVG nodes can be moved and the strokes/lines update their positions (created by Blake, located here: 

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

)

 

And another where objects randomly move around via the CustomWiggle plugin (located here: 

See the Pen 3566533ea0bf699796bb4d696bd1ca50 by GreenSock (@GreenSock) on CodePen

)

 

I'm struggling to understand how to pass X/Y coordinates from the Wiggles to update the SVG via the moveAction() function. The end goal is to have the points movable via drag, but also to have them move around on their own when not being dragged. I'd settle for them just moving on their own with the SVG lines updating correctly to their new coordinates as they float through space, though.

 

Thanks in advance for any possible help you can offer. You guys really are the best. I can't believe I found those two examples as is!

 

 

 

See the Pen wjRPJX by anon (@anon) on CodePen

[OSUblake]

There's some SVG magic going on there. Not really, people just think SVG is all based on attributes, but there's objects to work with. This line of code is getting actual point objects from the SVG.

 

var point = star.points.getItem(i);

 

Changing a point automatically updates the element. I show how some of that works in this post.

 

 

 

And to get the transform values, GSAP puts an object on the element called _gsTransform. OBJECT is the key word there. That means we can scope a function to that object i.e. moveAction.

 

 

var tl = new TimelineMax({ onUpdate: moveAction, callbackScope: handle._gsTransform });

// Draggable and the timeline can share this function
function moveAction() {
  point.x = this.x;
  point.y = this.y;
}

 

 

 

 

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

 

 

[GreenSock]

Nice demo, @OSUblake! Draggable, wiggles, momentum (throwProps)...it's a cornucopia of GSAP fun

[SammyC123]

Holy cow, I can't believe you responded so quickly!  I shouldn't have even stepped away from my computer.

 

Thank you so much, @OSUblake. That is exactly what I was looking for, and you did it in record time. Like Jack said, that is a whole lot of Greensock goodness in one tidy little Codepen.

 

I never cease to be amazed when I visit this forum.