Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Updating SVG Node Positions Via Wiggles

Recommended Posts

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

Link to comment
Share on other sites

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



  • Like 4
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

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