raskolnikov

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.

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!

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

Awesome! Thanks for the prompt reply and a fantastic library!

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 } ); });