[SVG Path to Bezier tool]

Well shoot.

Just found this post here since the last time I was on the forums. Looks like the issue has already been addressed.

Feel free to delete this post.

[SVG Path to Bezier tool]

Hey all!

 

I've been doing a lot of animating along bezier curves and created a simple little helper tool/function that converts an SVG path into an array of cubic bezier points that can be plugged directly into GSAP Tweening functions. It's still missing a little functionality for quadratic and elliptical arc movements, but I haven't come across any issues with it yet converting SVGs saved out of Illustrator.

 

Just thought I'd share in case anyone else finds it useful.

 

http://github.com/mattanglin/svg-to-cubic-bezier

 

I'll update to incorporate the other SVG movements (and cleanup the code. It's pretty quick and dirty at the moment...) as I have time. Any feedback welcomed.

 

Thanks!

 

 

[Lazy Rendering Error in TweenMax]

This fixed all my console errors. Thanks so much for previewed update! I'll keep an eye out for the official release!

[Lazy Rendering Error in TweenMax]

Awesome!

 

Thanks for the prompt reply and a fantastic library!

[Lazy Rendering Error in TweenMax]

I've created a few animations that run simultaneously along a bezier curve and stop at different points along the path by utilizing another Tween to control progress. Everything animates perfectly, but I keep getting the following error in my console:

 

TypeError: a is undefined

 

a._lazy = false;

 

 

TweenMax.js (line 6097, col 6)

 

Looking into the source it seems that this has something to do with the new "lazy" rendering feature released in 1.12.0

http://greensock.com/gsap-1-12-0

 

Any ideas as to what's going on here?

 

Here is my code as it pertains to this issue (Only loading the TweenMax.js library):

      var trajectory_path = [
          {x:0,y:0},
          {x:0,y:-73.6},{x:-58.2,y:-133.2},
          {x:-130,y:-133.2},
          {x:-201.8,y:-133.2},{x:-260,y:-73.6},
          {x:-260,y:0},
          {x:-260,y:76},{x:-189.7,y:133.2},
          {x:-117.9,y:133.2},
          {x:-27,y:133.2},{x:58,y:51.6},
          {x:58,y:-50},
          {x:58,y:-151.6},{x:-13.7,y:-218.4},
          {x:-100.6,y:-245.9}];

      var rockets = $('.rocket');
      var full_duration = 20;
      var full_progress = .9;
      var contest_progress = 1; // as float percentage
      
      rockets.each(function(i,rocket) {
        // Create tween on bezier curve
        var progress = parseFloat($(rocket).attr('data-progress')) * full_progress; // Get this from data attribute
        var duration = full_duration * contest_progress; // This should reflect the contest week and not the trajectory distance

        var t = TweenMax.to(
          rocket,
          full_duration,
          {
            bezier:{
              type: 'cubic',
              values: trajectory_path,
              autoRotate: 90
            },
            paused:true,
            ease: Linear.easeNone,
          }
        );

        // Animate
        TweenMax.to(
          t,
          duration,
          {
            progress: progress,
            ease: Linear.easeNone
          }
        );
      });

 

See the Pen oiDxg by anon (@anon) on CodePen