onCompleteParams and this.

[Thomas James Thorstensson 18 Likes (Newbie)]

Hello again Fellow Socks of Green!

 

Wondering what the best approach is for this. I cannot bind the onCompleteParams but I cannot figure out how to do it with a string say onCompleteParams:"#message5"

 

Silly, I shold be able to figure out how to rewrite the gsap bits in legalLoopCount to work with string as argument but can't. Hmm. 

 

this.tl.from("#legal", {duration: 1,autoAlpha: 0, onComplete:this.legalLoopCount.bind(this), onCompleteParams:this.message5})

/**
 * @param {*} elStr The element we are hiding when showing legal
 */
Ad.prototype.legalLoopCount = function (el) {
  console.log(el)
  if (this.loopIncr == defaultValues.customVariable3) {
    gsap.to(el, {duration: 1,autoAlpha: 0, delay:2})
    gsap.to(el, {duration: 1,autoAlpha: 1,delay:2})
  }
  this.loopIncr +=1;
}

 

[Carl 10,773 Likes (Superhero)]

I'm guessing you will need to set callbackScope:this (assuming you are using GSAP 3)

 

watch this video at 6:35

 

 

 

[Thomas James Thorstensson 18 Likes (Newbie)]

2 minutes ago, Carl said:

I'm guessing you will need to set callbackScope:this (assuming you are using GSAP 3)

 

watch this video at 6:35

 

 

 

Oh great Thanks Carl

 

I thought this was removed in the new flavour of GSAP! I must have misread that part

 

Yes I did here I see the fine comment:

“scope” values at all (except callbackScope). So no onCompleteScope, onUpdateScope, onStartScope, etc. 

 

Okay, well this will fix it

 

Thanks!

 

Thomas 

[Thomas James Thorstensson 18 Likes (Newbie)]

6 minutes ago, Thomas James Thorstensson said:

EDIT

I spoke to early, sorry,

 

I tried this line, but it didn't work. I will do a workaround now and pass a label!

 

  this.tl.from("#legal", {duration: 1,autoAlpha: 0, onComplete:this.legalLoopCount.bind(this), callbackScope:this, onCompleteParams:this.message3})

6 minutes ago, Thomas James Thorstensson said:

 

 

 

 

Oh great Thanks Carl

 

I thought this was removed in the new flavour of GSAP! I must have misread that part

 

Yes I did here I see the fine comment:

“scope” values at all (except callbackScope). So no onCompleteScope, onUpdateScope, onStartScope, etc. 

 

Okay, well this will fix it

 

Thanks!

 

Thomas 

 

[Carl 10,773 Likes (Superhero)]

i'm sure we could find a solution if you take the time to post a reduced test case. Tough working with out-of-context code snippets.

[Thomas James Thorstensson 18 Likes (Newbie)]

5 minutes ago, Carl said:

i'm sure we could find a solution if you take the time to post a reduced test case. Tough working with out-of-context code snippets.

Ad.prototype.animateThreeFrames = function() {

    this.tl.set("#message5, #message4 ", { autoAlpha: 0 });

    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.animation = this.tl.from("#legal", {duration: 1,autoAlpha: 0, onComplete:this.legalLoopCount, callbackScope:this})
      this.message = this.message3;
    }else {
      this.tl.set("#legal", { autoAlpha: 0 });
    }
};

Ad.prototype.legalLoopCount = function (el) {
  console.log("value of element is now" + this.animation.message)
  if (this.loopIncr == defaultValues.customVariable3) {
    gsap.to(this.animation.message, {duration: 1,autoAlpha: 0, delay:2})
    gsap.to(this.animation.message, {duration: 1,autoAlpha: 1,delay:2})
  }
  this.loopIncr +=1;
}

Hi, this is the best I can do at moment as I have to push on with work here in office sorry. I tried the above which is as close to the video example I could get but hmm value is undefined. Thanks

 

 

[ZachSaucier 7,065 Likes (Superhero)]

When we ask for a reduced test case we usually mean a complete test case where we see elements on the page and they do things (or don't do them due to an error). Only included the relevant parts as well.

 

Please recreate a complete minimal demo using our CodePen starter pen as a base when you have the time.

[Thomas James Thorstensson 18 Likes (Newbie)]

3 minutes ago, ZachSaucier said:

When we ask for a reduced test case we usually mean a complete test case where we see elements on the page and they do things (or don't do them due to an error). Only included the relevant parts as well.

 

Please recreate a complete minimal demo using our CodePen starter pen as a base when you have the time.

Okay, roger that, I will do that when I have the time but it will be EOP today I think. I have to push on into the mist as they say in the movies!

 

Thanks

 

Thomas, Greensocker

[Thomas James Thorstensson 18 Likes (Newbie)]

24 minutes ago, ZachSaucier said:

When we ask for a reduced test case we usually mean a complete test case where we see elements on the page and they do things (or don't do them due to an error). Only included the relevant parts as well.

 

Please recreate a complete minimal demo using our CodePen starter pen as a base when you have the time.

Sorry, 

 

It works!

 

I was over stressed and of course just needed to access it as this.message

 

see it say it sorted!

 

Thomas

[OSUblake 18,369 Likes (Superhero)]

Callback params go inside an array.