Jump to content
Search Community

Lazy Rendering Error in TweenMax

raskolnikov
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Posted

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;

 

 

 
Looking into the source it seems that this has something to do with the new "lazy" rendering feature released in 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.

Posted

Yep, we know exactly what's going on and we'll be releasing an update very soon to address this (probably later today or tomorrow). I apologize for the hassle - please stand by...

  • Like 1
Posted

Awesome!

 

Thanks for the prompt reply and a fantastic library!

  • Solution
Posted

We're still finalizing a few things, but I wanted to get you a preview copy of the upcoming release so that you can get your project working. Let me know if this resolves the issue for you. 

GSAP_1.13.3_preview1.zip

Posted

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...