Jump to content
GreenSock

NevTing

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by NevTing

  1. I just discovered something very interesting about the EndArrayPlugin. If the values at a certain index are the same in both arrays, it won't tween the value, which means the array can contain strings. The only caveat is that the first element must be a number, but that's not too hard to get around.

     

    What all this means is that you can split a path string into an array and tween that. Since the plugin is going to ignore strings, you don't need to break your path up into different commands, tween those values, and then rebuild the path string. The only limitations of using this technique are that the number of points and commands must match up, so you can't go from C to c or C to S. You also can't change a flag, like in the arc command where you can specify to use a large arc since that value must be an integer.

     

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

     

    I just created an account to commend you on this solution. I've been using GSAP for a while but just started with Snap. I created my animations of polygon points using Snap but before creating functions to loop and start, stop etc (maybe Snap has these built it but I got bored of looking in the docs), I thought I'd see if there's any way to do it with GSAP. The above is working very nicely and allows me to use stop(), play() etc. I'm confident the animations will be more stable across browsers and devices as it's GSAP. Looking forward to the future SVG plugin!

    • Like 4
×