Jump to content
Search Community

onCompleteParams and this.

Thomas James Thorstensson test
Moderator Tag

Recommended Posts

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

 

Link to comment
Share on other sites

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 

  • Like 1
Link to comment
Share on other sites

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 

 

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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