SVG Rubberhose with 2D 'Rigging'

[bigupjeff]

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

[GreenSock]

Thanks for sharing, @bigupjeff! It's so cool when the community contributes and solutions are shared. 💚

 

Looks like a fun experiment.