[SVG Rubberhose with 2D 'Rigging']

I recently posted this thread where I shared my solution to animating SVG paths by variables. It was here I was taught that GSAP can animate between SVG path strings (d="M 431,382 C 412,382 402,393...") without needing to teach it what any of those numbers and letters mean - still mind blown. 🤯

 

Anyway, it made that demo kinda redundant and it was only a test to see if rubberhose animation would be feasable with GSAP. I had some time this afternoon, so with what I learnt in that thread, I put together another demo with some actual rubberhose fun. It also shows how SVG objects can be tracked along a point of another moving SVG object in the same viewbox to simulate 2D rigging. Meet the professor. 👋🙂

 

Of course, all feedback welcome - learn me! 💚

 

(again, this isn't a question, I just wanted to share)

 

 

See the Pen YzarYWJ by bigupjeff (@bigupjeff) on CodePen

[Manipulate an SVG Path by Animating Path Coordinates]

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

[Manipulate an SVG Path by Animating Path Coordinates]

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 🤘

[Manipulate an SVG Path by Animating Path Coordinates]

Oo yeah, same handle as here: @BigupJeff

 

Thanks! 😁

[Manipulate an SVG Path by Animating Path Coordinates]

@Cassie Hell yes! It would be an honour 🙏😁

[Manipulate an SVG Path by Animating Path Coordinates]

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