Jump to content
GreenSock

bigupjeff

Members
  • Posts

    6
  • Joined

  • Last visited

About bigupjeff

  • Birthday February 2

Profile Information

  • Gender
    Male
  • Location
    Hampshire, UK

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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)
  2. 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. 😂
  3. 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 🤘
  4. Oo yeah, same handle as here: @BigupJeff Thanks! 😁
  5. @Cassie Hell yes! It would be an honour 🙏😁
  6. 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. 🙂
×