Solution bigupjeff Posted July 26, 2022 Solution Share Posted July 26, 2022 This is not a question. I couldn't find any examples doing exactly what I wanted, so I thought I'd share my demo solution with the GSAP forum for future SVG hackers. 🤘 This demonstrates a method for animating an SVG <path> by animating an object of JS variables which then get set as the d attribute as a string of coordinates using GSAP's onUpdate callback. Animating JS variables. Animating SVG <path> points and beziers. Interactive path points with range input controls. Selectable animations with checkbox controls. Function for creating child timelines and and calling a master timeline dynamically. All feedback welcome, I never stop learning! Hope this helps somebody. 🙂 See the Pen rNdmqdO?editors=0010 by bigupjeff (@bigupjeff) on CodePen 2 Link to comment Share on other sites More sharing options...
Cassie Posted July 26, 2022 Share Posted July 26, 2022 LOVE IT Can we share it on twitter 👀 1 Link to comment Share on other sites More sharing options...
bigupjeff Posted July 26, 2022 Author Share Posted July 26, 2022 @Cassie Hell yes! It would be an honour 🙏😁 Link to comment Share on other sites More sharing options...
Cassie Posted July 26, 2022 Share Posted July 26, 2022 Are you on there? If so pop me your @☺️ Link to comment Share on other sites More sharing options...
bigupjeff Posted July 26, 2022 Author Share Posted July 26, 2022 Oo yeah, same handle as here: @BigupJeff Thanks! 😁 Link to comment Share on other sites More sharing options...
GreenSock Posted July 26, 2022 Share Posted July 26, 2022 Nice job, @bigupjeff. Thanks for sharing! Did you know that GSAP can animate a complex string that contains a bunch of numbers? It can also animate numbers inside an Array. Here's a quick demo: See the Pen dymVGOg?editors=0010 by GreenSock (@GreenSock) on CodePen There's nothing wrong with the way you approached things - I just figured you might appreciate knowing about these capabilities because it may simplify your code. No need for an object with specific property names like that. But if doing it that way fits better with how you think intuitively, great! I'm sure you already know this, but MorphSVGPlugin will handle all the complexities of animating between path data, even if there is a different number of points between the start and the end shape ("d" attribute). You can just feed the raw path data string in to a single tween and BOOM, it handles it all for you. Happy tweening! 2 Link to comment Share on other sites More sharing options...
bigupjeff Posted July 26, 2022 Author Share Posted July 26, 2022 I had absolutely no idea you could tween arrays 😂 - that's awesome! The object approach is industrial, so I'll probably have a play with array tweening and refactor. Succint code helps me sleep at night. I did know about the MorphSVGPlugin though. This started off as a simple experiment for animating limbs (rubberhose style) so I thought "I'm just moving a couple of coordinates right?" but I can see how the MorphSVGPlugin could be perfect. Time to play! Thanks for the info 🤘 3 Link to comment Share on other sites More sharing options...
GreenSock Posted July 26, 2022 Share Posted July 26, 2022 In case it wasn't obvious, you can animate the "d" attribute directly like this: See the Pen gOeGrqx?editors=1010 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
iDad5 Posted July 26, 2022 Share Posted July 26, 2022 @GreenSock you freak me out... The first example, animating from ''0, 10, 20, 30, 40, 50" to "100, 90, 80, 70, 60, 50" seems rather straight forward, even if I would have hit my self 5 times over the head before trying such a stunt. But animating from "M 0,200 C 0,200 100,300 200,200 S 400,200 400,200" to ""M 0,200 C 0,200 100,300 200,200 S 400,200 400,200" without breaking a sweat seem to defy the laws of the universe. But if you give GreenSock half an hour or so... 2 Link to comment Share on other sites More sharing options...
bigupjeff Posted July 26, 2022 Author Share Posted July 26, 2022 My thoughts exactly. I was already plotting ways to push/pop the path commands (M/C/S) in and out of the array. I should have known better. 😂 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now