Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
st3f

How to pass '{self}' to a function in GSAP3

Recommended Posts

Hi everybody, I'm struggling a lot with the new vars and params...

Now, if I do:

var tw = gsap.to([myMapContents, myMapShadows, myMapExtras, myGridClose, myGridFar], {duration:dur,
                cycle:{x:[deltaX, deltaX*.96, deltaX*.8, deltaX*.6, deltaX*.4], y:[deltaY, deltaY*.96, deltaY*.8, deltaY*.6, deltaY*.4] }, 
                ease:Power2.easeOut, onComplete:moveMapComplete, onCompleteParams:[instance], onUpdate:onTweenUpdate, onUpdateParams:["{self}", instance, dur]
    } );

like I was was used to with TweenMax, my nice function:

function onTweenUpdate(tw, instance, totaltime){
    if(instance.onUpdateTween){
        instance.onUpdateTween(tw.time().toFixed(2), totaltime);
    }

    if(tw.progress() > .8 && !onTweenDrawn){
        // if already drawn once, takes no further action
        if(!instance.isDrawn){
             instance.draw(); 
        }
       
        onTweenDrawn = true;
    }

}

Shout at me that:

tw.time()

is not a function...

So, what I have to write to send a reference of the tween somewhere else?

 

Thank you in advance :)

 

 

 

Share this post


Link to post
Share on other sites

Just use this inside a regular function.

 

gsap.to({}, {
  onUpdate: onTweenUpdate
});

function onTweenUpdate() {
  console.log(this);
}

 

  • Like 2

Share this post


Link to post
Share on other sites

Hi Blake, thank you. I've already tried that but, because of a very long console output I didn't notice the crash (maybe) happens before, because of "cycle".

I'm going to work on this... :)

gsap-console-01.thumb.jpg.216d223d8f4a79c9be63a5a3a8a925a0.jpg

Share this post


Link to post
Share on other sites

There is no cycle in v3. Use gap.utils.wrap() or gsap.utils.wrapYoyo().

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

https://greensock.com/docs/v3/GSAP/UtilityMethods/wrapYoyo()

 

var tw = gsap.to([myMapContents, myMapShadows, myMapExtras, myGridClose, myGridFar], {
  duration: dur,
  x: gsap.utils.wrap([deltaX, deltaX * .96, deltaX * .8, deltaX * .6, deltaX * .4]),
  y: gsap.utils.wrap([deltaY, deltaY * .96, deltaY * .8, deltaY * .6, deltaY * .4]),
  ease: "power2", 
  onComplete: moveMapComplete, 
  onCompleteParams: [instance], 
  onUpdate: onTweenUpdate, 
  onUpdateParams: [instance, dur]
});

 

Notice the string ease. Much shorter. "power2" is the same as "power2.out".

 

Be sure to check out the release notes.

 

 

  • Like 4

Share this post


Link to post
Share on other sites

Oui, Blake, thanks a lot, I definitely have to...

Deadly close deadline. Maybe I should stay on v2 for that.

 

Thank you so much

Share this post


Link to post
Share on other sites

Anyway, just to know, even with your code, if I add a reference to the tween

onUpdateParams: [this, instance, dur]

I'm getting in the console:

TypeError: tw is undefined

 

ouf, I'll figure it out... Thank you :)

Share this post


Link to post
Share on other sites

Please make a simple demo, because I can't tell what those params are from your code snippet. Like I don't know where instance is coming from, or what that is supposed to be.

 

But this is most likely wrong.

onUpdateParams: [this, instance, dur]

 

Just like this.

onUpdateParams: [instance, dur]

 

Use this inside the function for the tween.

 

function onTweenUpdate(instance, totaltime){
    if(instance.onUpdateTween){
        instance.onUpdateTween(this.time().toFixed(2), totaltime);
    }

    if(this.progress() > .8 && !onTweenDrawn){
        // if already drawn once, takes no further action
        if(!instance.isDrawn){
             instance.draw(); 
        }
       
        onTweenDrawn = true;
    }

}

 

  • Like 3

Share this post


Link to post
Share on other sites

Inside gsap callbacks, this is the tween/timeline unless you change the scope, but I'm not going to get into that right now. So '{self}' is the same thing as this.

  • Like 2

Share this post


Link to post
Share on other sites

ooohhh, now I get it. The scope, always the scope is my problem in js...

 

"instance" is a class I use to draw things. Thank you very much, I think I've found a way :)

  • Like 2

Share this post


Link to post
Share on other sites

@OSUblake I've found a very bad way...

 

ERRATA: I solved. I have to pass it an array. ok :)

gsap.utils.wrap([deltaX, deltaX * .96, ...])

 

See the Pen JjjeeZp by st3f (@st3f) on CodePen

 

Why

gsap.utils.wrap(deltaX, deltaX * .96, ...)

is not targeting the different elements?

 

 

Edited by st3f
solved

Share this post


Link to post
Share on other sites
17 minutes ago, st3f said:

Why


gsap.utils.wrap(deltaX, deltaX * .96, ...)

is not targeting the different elements?

 

My bad. It's supposed to go in an array. 

 

var tw = gsap.to([myMapContents, myMapShadows, myMapExtras, myGridClose, myGridFar], {
  duration: dur,
  x: gsap.utils.wrap([deltaX, deltaX * .96, deltaX * .8, deltaX * .6, deltaX * .4]),
  y: gsap.utils.wrap([deltaY, deltaY * .96, deltaY * .8, deltaY * .6, deltaY * .4]),
  ease: "power2", 
  onComplete: moveMapComplete, 
  onCompleteParams: [instance], 
  onUpdate: onTweenUpdate, 
  onUpdateParams: [instance, dur]
});

 

  • Like 4

Share this post


Link to post
Share on other sites

Yeah :) But now I know :)

Merci

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×