Jump to content
GreenSock

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

killTweensOf event ?

Recommended Posts

It possible to add a native event like:

.eventCallback('onKill', function)

or maybe a way to force onComplete when is kill ?

 

Example context:

pointerdown_Axi3d(e){
    // blink renderable objs
    gsap.fromTo(
    $objs.LOCAL.unique().map(o=>o.link), 3,
    { renderable:false },
    {
        renderable:true, 
        repeat:-1, 
        ease:SteppedEase.config(1), 
        id:'blinkRenderable' 
    })
    .eventCallback('onComplete', myfunction);
}

then if i kill 
 

  pointerup(e){
    gsap.killTweenById('blinkRenderable');
  }

how i can say, kill but plz call the onComplette event ! ?

My target is when i kill the tweens lots, i want force restore the value renderable to true inside a event function.

 

Link to post
Share on other sites

No, I think it'd be much cleaner to just do this: 

let tween = gsap.getById('blinkRenderable');
tween && tween.progress(1).kill();

Unless I misunderstood your goal. 

  • Like 1
Link to post
Share on other sites
4 hours ago, GreenSock said:

No, I think it'd be much cleaner to just do this: 


let tween = gsap.getById('blinkRenderable');
tween && tween.progress(1).kill();

Unless I misunderstood your goal. 

my goal it just found a way to fired the events 

.eventCallback('onComplete', myfunction);

when the tween killed.
Any way to fired a events natively when killing a tween ?

Link to post
Share on other sites

Right, if you make the progress to go 1, that would necessarily trigger the onComplete (assuming it wasn't already completed). 

 

There is an onInterrupt callback that'll get triggered if/when the tween is interrupted (like due to overwriting for example). 

 

But again, my solution above delivers on exactly what you said you wanted...right? 

  • Like 1
  • Thanks 1
Link to post
Share on other sites
16 hours ago, GreenSock said:

Right, if you make the progress to go 1, that would necessarily trigger the onComplete (assuming it wasn't already completed). 

 

There is an onInterrupt callback that'll get triggered if/when the tween is interrupted (like due to overwriting for example). 

 

But again, my solution above delivers on exactly what you said you wanted...right? 

But seem not work on my side.
Here a minimal demo
https://www.pixiplayground.com/#/edit/cmhsH5NV232cW9SGj6nTa
wait the bunny renderable:false, and click unblink text button, you will see, it seem not work.
i also try with 

.progress(0.5)
.progress(0)
Link to post
Share on other sites

With direct state changes like you have (where the property is not really animatable, it just toggles state) you have to be careful. In your case, you could just switch the order in your fromTo:

gsap.fromTo(bunny,2,
    {
        renderable:false // from false instead of true
    },
    {
        id:'blinkRenderable',
        renderable:true, // to true instead of false
        repeat:-1, 
        ease:SteppedEase.config(1)
    })

 

Link to post
Share on other sites
2 minutes ago, ZachSaucier said:

With direct state changes like you have (where the property is not really animatable, it just toggles state) you have to be careful. In your case, you could just switch the order in your fromTo:


gsap.fromTo(bunny,2,
    {
        renderable:false // from false instead of true
    },
    {
        id:'blinkRenderable',
        renderable:true, // to true instead of false
        repeat:-1, 
        ease:SteppedEase.config(1)
    })

 

the small concern is that I wanted to keep a state that could be rendered for 2 seconds. 😀
2QyjNiv5_o.gif

 

I am not founding intuitive to start with renderable false for a blinking behaviour.
Maybe a delay ? or other thing ?
I dont know all ma alternative with the api.

Link to post
Share on other sites

You could get the target of the tween and set the renderable state yourself:

var elem = gsap.getById('blinkRenderable').targets()[0];
gsap.getById('blinkRenderable').kill();
gsap.set(elem, {renderable:true});

 

  • Thanks 1
Link to post
Share on other sites
2 minutes ago, ZachSaucier said:

You could get the target of the tween and set the renderable state yourself:


var elem = gsap.getById('blinkRenderable').targets()[0];
gsap.getById('blinkRenderable').kill();
gsap.set(elem, {renderable:true});

 

nice thanks for this good tips 😀
I will also look for the event onInterrupt 
But it seem i can't found information in docs, and also my IDE intelisence seem don't know this event.
JarvGO8C_o.png

Any information or link to doc for this ?

Link to post
Share on other sites
2 minutes ago, jonForum said:

my IDE intelisence seem don't know this event

Hmm. I see it in the definition files for tween parameters, i.e. {onInterrupt: myFunc}. Maybe it's missing the definition inside .eventCallback? What version of GSAP are you using?

 

1 minute ago, jonForum said:

Any information or link to doc for this ?

You can read some about it on the .to(), .from(), and .fromTo() pages: https://greensock.com/docs/v3/GSAP/gsap.to() I'll try to make things like this more searchable when I get some time.

  • Thanks 1
Link to post
Share on other sites

i was use from npm 

    "gsap""^3.0.4",


but it fine i will fix it,
I have a custom hacked version , i maybe broke something ! or missing a update.
Thank for doc link and your time.
Your are both awesome.
 

Link to post
Share on other sites
3 hours ago, jonForum said:

But it seem i can't found information in docs, and also my IDE intelisence seem don't know this event.

 

Yes, "onInterrupt" isn't in there, which is why your intellisense can't find it.

https://github.com/greensock/GSAP/blob/d05746483fd6c7fef1e15d56ef980f17f03d6be8/types/gsap-core.d.ts#L21

 

I've mostly been going off docs to write the definitions, so if the docs are incorrect, then the definitions might be too.

 

That said, I don't know what onInterrupt is valid for. Is it just for tweens, or timelines and tweens. Maybe @GreenSock can fill me on that.

Link to post
Share on other sites
2 minutes ago, OSUblake said:

Is it just for tweens, or timelines and tweens.

A quick test says it works on both tweens and timelines.

Link to post
Share on other sites

Thanks. It's been updated.

  • Thanks 1
Link to post
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.

×