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