Jump to content
Search Community

gsap object between two prototype methods. heeelp

Thomas James Thorstensson test
Moderator Tag

Recommended Posts

Hello Feelow Green Socks!

 

I have the below code. The second bit of gsap code in the method legalLoopCount, behaves oddly but if you put the same animation lines into the top method, it behaves correctly. Instead of ending at the first loop, when you have it in the second method, legalLoopCount, it fades in out and in again. If I lift the same finishing lines into top it works. I put the code in a second method since onComplete is the only way I can execute this action. Maybe I should do the looping manualy instead though and put the logic in one method, that way I can increment the loop counter without waiting for onComplete.

 

I am sure I'm missing something obvious but it seems to me that somehow when the last bit of code resides in legalLoopCount, that GSAP somehow looses track

of the timeline. I'm sure I missed something in my Brain.

 

Code:

 

Ad.prototype.animateThreeFrames = function() {

    //* See GWD html page where ad is opacity:0 from start
    this.tl.to(".gwd-page-wrapper", { duration: .2, autoAlpha: 1 }, "+=0")

    this.tl.to("#cta", { duration: .2, autoAlpha: 1 }, "+=0")
    //1
    .to("#baseImage", { duration: 1, autoAlpha: 1 }, "+=0")
    
    .from("#message1", {duration: 1,autoAlpha: 0,x: 100})
    .to("#message1", {duration: 1,autoAlpha: 0}, "+=2")
    //
    .from("#message2", {duration: 1,autoAlpha: 0,x: 100})
    .to("#message2", {duration: 1,autoAlpha: 0}, "+=2")
    //3
    .from("#message3", {duration: 1,autoAlpha: 0,x: 100})

    //if legal then show legal
    if (!defaultValues.legal == "") {
      this.tl.to("#message3", {duration: 1,autoAlpha: 0}, "+=2")
      this.tl.from("#legal", {duration: 1,autoAlpha: 0,x: 100, onComplete:this.legalLoopCount.bind(this)})
    }
};

Ad.prototype.animateFourFrames = function() {

};

Ad.prototype.animateFiveFrames = function() {

};

Ad.prototype.legalLoopCount = function () {

  console.log("___THIS LEGAL LOOP COUNT FIRES " + this.loopIncr)
  if (this.loopIncr == 1) {
     this.tl.to("#legal", {duration: 1,autoAlpha: 0}, "+=2")
     this.tl.to("#message3", {duration: 1,autoAlpha: 1})
  }

  this.loopIncr +=1;
}

 

Link to comment
Share on other sites

1 hour ago, Thomas James Thorstensson said:

Instead of ending at the first loop, when you have it in the second method, legalLoopCount, it fades in out and in again.

Isn't that because you have 

if (!defaultValues.legal == "") {
  this.tl.to("#message3", {duration: 1,autoAlpha: 0}, "+=2")
  this.tl.from("#legal", {duration: 1,autoAlpha: 0,x: 100, onComplete:this.legalLoopCount.bind(this)})
}

running before legalLoopCount runs and then also fade it out in legalLoopCount? Without looking at an example, this is all very abstract but it very much seems related to your animation logic. Can you please try making a minimal demo in a CodePen?

Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Isn't that because you have 


if (!defaultValues.legal == "") {
  this.tl.to("#message3", {duration: 1,autoAlpha: 0}, "+=2")
  this.tl.from("#legal", {duration: 1,autoAlpha: 0,x: 100, onComplete:this.legalLoopCount.bind(this)})
}

running before legalLoopCount runs and then also fade it out in legalLoopCount? Without looking at an example, this is all very abstract but it very much seems related to your animation logic. Can you please try making a minimal demo in a CodePen?

Sorry for no code pen a bit too busy at work at moment sorry.

 

Well the reason for that is that if final loop it should fade out legal and show last message again (message3)

 

But someohow the timing seem to collide at that point. But I mean just because "tl" is in a second method should not mess up the track of the timeline should it. If I take exactly the same two lines from legal loop count and drop them after the on complete in animateThreeFrames it works (if i make legalLoopCount blank and instead put the could right after the onComplete)

 

Thanks

Link to comment
Share on other sites

I got no clue why but if I replace the legalLoopCount code with this, so I run gsap instead of timeline in legalLoopCount it works

 

Ad.prototype.legalLoopCount = function () {
  if (this.loopIncr == defaultValues.customVariable3) {
    console.log("END")
    gsap.to("#legal", {duration: 1,autoAlpha: 0})
    gsap.to("#message3", {duration: 1,autoAlpha: 1})
  }
  this.loopIncr +=1;
}

Now it works. The other method is unchanged. I must be missing something. But I cant see what. If i put the "tl" back in it no longer works it is as if the timline looses track of the time once I jump into legalLoopCount

Link to comment
Share on other sites

57 minutes ago, elegantseagulls said:

Hi @Thomas James Thorstensson,

 

Where/How are you defining your timeline?

Hello here is the full code, and this works. As Long as I use an instance of gsap instead of timeline in legalLoopCount(), it works. 

If I instead use timeline, same timeline, in legalLoopCount, it no longer works. This works:

 

"use strict";

/**
 * * Is initialized from the GWD default HTML document
 */

function Ad() {

  this.loopIncr= 0;
  this.tapArea = document.querySelector("#tapArea");
  document.querySelector("#page1").style.opacity = 0;

  // GSAP !
  // repeat: sets number of loops
  this.tl = gsap.timeline({repeat: defaultValues.customVariable3, repeatDelay:2});

  this.tl2 = gsap.timeline();
  
  // Init
 // this.setAnimationDefaults();
  this.startAdLib();
  this.callGWDPlayPause();
  setTimeout(this.startAnimation.bind(this), 1000); 
}

/**
 * !TODO It is not clear if this init is needed since we are using gsap.timline
 * 
 */
Ad.prototype.setAnimationDefaults = function() {
  this.tl.set("#baseImage", { autoAlpha: 0 });
  this.tl.set("#message1, #message2, #message3, #legal", { autoAlpha: 0 });
  
}

/**
 * One method for each frame count
 */
Ad.prototype.animateThreeFrames = function() {

    //* See GWD html page where ad is opacity:0 from start
    this.tl.to(".gwd-page-wrapper", { duration: .2, autoAlpha: 1 }, "+=0")

    this.tl.to("#cta", { duration: .2, autoAlpha: 1 }, "+=0")
    //1
    .to("#baseImage", { duration: 1, autoAlpha: 1 }, "+=0")
    
    .from("#message1", {duration: 1,autoAlpha: 0,x: 100})
    .to("#message1", {duration: 1,autoAlpha: 0}, "+=2")
    //2
    .from("#message2", {duration: 1,autoAlpha: 0,x: 100})
    .to("#message2", {duration: 1,autoAlpha: 0}, "+=2")
    //3
    .from("#message3", {duration: 1,autoAlpha: 0,x: 100})

    //if legal then show legal
    if (!defaultValues.legal == "") {
      this.tl.to("#message3", {duration: 1,autoAlpha: 0}, "+=2")
      this.tl.from("#legal", {duration: 1,autoAlpha: 0, onComplete:this.legalLoopCount.bind(this)})
    }else {
      this.tl.set("#legal", { autoAlpha: 0 });
    }
};

Ad.prototype.animateFourFrames = function() {

};

Ad.prototype.animateFiveFrames = function() {

};

Ad.prototype.legalLoopCount = function () {
  if (this.loopIncr == defaultValues.customVariable3) {
    gsap.to("#legal", {duration: 1,autoAlpha: 0, delay:2})
    gsap.to("#message3", {duration: 1,autoAlpha: 1,delay:2})
  }
  this.loopIncr +=1;
}

/**
 * !TODO Needs to change to defaultValues.numberOfFrames later
 * Maybe Ill end up making these methods into regular functions no hoisting can be annoying
 */
Ad.prototype.startAnimation = function() {
  
    switch (defaultValues.customVariable1) {
        case "3":
          console.log("CASE THREE");
          this.animateThreeFrames();
        break;
      
        case "4":
          console.log("CASE FOUR");
          this.animateFourFrames();
        break;

        case "5":
          console.log("CASE FIVE")
          this.animateFiveFrames();
        break;

      default:
        console.log("something gone wrong")
        break;
    }
};

/**
 * Default event handler
 */
Ad.prototype.handleEvent = function(e) {
  e.preventDefault();
  switch (e.type) {
    case "click":
      break;
    case "webkitTransitionEnd":
      break;

    default:
      break;
  }
};

/**
 * * Ad-Lib
 * Helper methods
 * * Reflection: we should be fine calling them from inside class
 */
Ad.prototype.startAdLib = function(e) {
  adlibStart();
};

Ad.prototype.endAdLib = function(e) {
  adlibEnd();
};

Ad.prototype.callAdlibScreenshot = function() {
  takeScreenshot();
  console.log("screenshot!");
};

Ad.prototype.stopAdlibScreenshot = function() {
  this.endAdLib();
  console.log("end screenshot!");
};

/**
 * * GWD
 * Helper methods
 */
Ad.prototype.callGWDPlayPause = function() {
  gwd.auto_PauseBtnClick = function(event) {
    TweenMax.pauseAll(true, true, true);
    console.log("Pause Timeline");
  };
  gwd.auto_PlayBtnClick = function(event) {
    TweenMax.resumeAll(true, true, true);
    console.log("Play Timeline");
  };
};

/**
 * Start ad
 */
function initAd() {
  window.ad = new Ad();
}

 

Thanks 

 

Link to comment
Share on other sites

What version of GSAP are you using? Please make sure it's at least 3.1.1.


It is difficult to troubleshoot without seeing a reduced test case in codepen, but if you've got it working okay now I'd understand if you don't want to bother. However, it'd be super-cool if you provided one so that we can double-check to make sure there aren't any bugs hiding in the source code :)  It's just really difficult to troubleshoot blind. I suspect there might be something else at play, though, and we'll be able to spot it once we see the reduced test case. 

 

 

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