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

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