Jump to content
Search Community

Lazy Rendering Error in TweenMax

raskolnikov test
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

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

Link to comment
Share on other sites

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...