Jump to content
Search Community

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

st3f test
Moderator Tag

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 :)

 

 

 

Link to comment
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
Link to comment
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
Link to comment
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
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...