Jump to content
GreenSock

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

how kill delaycall in v3 ?

Recommended Posts

How i can perform something like this with gsap3 ?
 

    pointerDown(e){
        gsap.delayedCall(1, ()=>{ contex.startScroll() }, id);
    }
    pointerout(e){ // somewhere with other contexts, needed getbyid
        gsap.getById(id)?.kill();
    }

i cant find anymore killDelayedCallsTo for gsap3 doc
https://greensock.com/docs/v2/TweenMax/static.killDelayedCallsTo()
Is it renamed ?


I can perform this with timeout or special ticks in my renderer but
i search for the most shorted code and easy code.
Thanks

 

Link to post
Share on other sites

ok i think i found a alternative , and work fine.
 

    pointerDown(e){
        gsap.to({},1,{id:'test'}).eventCallback('onComplete', ()=>{ contex.startScroll() });
    }
    pointerout(e){
        gsap.getById('test')?.kill();
    }


Code look weird for me, am not big fan,  but work fine.
I will let the tread open, feel free to suggest better proper way if it existe plz.
thanks :)

Link to post
Share on other sites

Since delayedCalls are just tweens that use the function as the target and the onComplete/onReverseComplete, you can simply use gsap.killTweensOf(). In v2, killDelayedCallsTo() was just an alias for killTweensOf() anyway :) 

 

There are a bunch of ways you could handle it. Here's one: 

gsap.delayedCall(2, () => console.log("hit")).vars.id = "myId";

gsap.getById("myId").kill();

Or:

gsap.to({}, {delay: 2, id:"myId", onComplete: () => console.log("hit")});

gsap.getById("myId").kill();

Or make your own helper function to make things even more concise and flexible: 

// this would allow you to getTweensOf() or killTweensOf() and pass in the function itself.
function delayedCall(delay, func, id) {
  return gsap.to(func, {delay: delay, onComplete:func, id:id});
}

delayedCall(2, () => console.log("hit"), "myId");

gsap.getById("myId").kill();

Or there are many other ways :)

 

  • Like 2
  • Thanks 1
Link to post
Share on other sites

ho thanks i was used something like thats

        gsap.to({},0.1,{id:'editorScrollMode', delay:1, repeat:-1 }).eventCallback('onUpdate', ()=>{
            this._scrollMode = true;
            const ContainerLibs = this.child.ContainerLibs;
            const e = $app.renderer.plugins.interaction.mouse.originalEvent
            ContainerLibs.x += e.movementX;
         } )

But the first one look nice for me , i will try refactoring. thanks.


BTW : i cant use 

gsap.getById("myId").kill(); // gsap.getById("myId")?.kill();  this is the new better way

Because it cant no existe sometime in async behavior.
But you have now a new awesome js update since few day with new operators,  100% work in V8 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

 

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

Or make your own helper function to make things even more concise and flexible: 


// this would allow you to getTweensOf() or killTweensOf() and pass in the function itself.
function delayedCall(delay, func, id) {
  return gsap.to(func, {delay: delay, onComplete:func, id:id});
}

delayedCall(2, () => console.log("hit"), "myId");

gsap.getById("myId").kill();

 

 


Ok so i opting for this way, but i will have a little question :)

 

/**
 * Call une function avec un delay, avec un ID
 * @param {number} delay
 * @param {function|any} func
 * @param {string} id
 * @param {any} [context]
 * @memberof gsap
 */
gsap.TimeoutCallId = function TimeoutCallId(delay=1, func, id, context) {
    return gsap.to(func, {delay, id, onComplete:func, callbackScope:context});
}

/**
 * Call une function avec un delay, avec un ID
 * @param {number} delay
 * @param {function|any} func
 * @param {string} id
 * @param {any} [context]
 * @param {number} [Interval]
 * @memberof gsap
 */
gsap.IntervalCallId = function IntervalCallId(delay=1, func, id, context, Interval=1000) {
    function onTweenUpdate() {
         // i realy dont know what i can do here ?
         // for tell gsap to call the update based on ms interal (deltaTime) passed ? 
        const delta = (Interval%~~this._tTime); 
        if(!delta){ func(this) }
    }
    return gsap.to({}, 1,{delay, id, onUpdate:onTweenUpdate, callbackScope:context, repeat:-1, });
}

The first one work fine, but i will have a little issue about my gsap.IntervalCallId(...)

How i can compute gsap value to make this hack work fine?
i would like able to simulate the vanilla setInterval(function(){ alert("Hello"); }, interval);

So i add a onUpdate scoped with animation context
But i cant found a logical formula with gsap values (._time ._tTime, .ratio )
I would like to call the update callback if(delta){ func(this) } with the interval ms passed ?
I tested yet many formula, but cant found one.
If a good mathBoy have any idea to provide me, i take it :)

Tell me if am no clear, i will try fix my english :) 

Link to post
Share on other sites

Why are you making a custom TimeoutCallId function instead of just using .delayedCall()?

 

I also do not understand what you're trying to do in the IntervalCallId function. If you want a GSAP version of setInterval you could do something like this:

// interval is in ms, just like setInterval
function setGSAPInterval(func, interval) {
  gsap.delayedCall(() => {
    func(); 
    setGSAPInterval(func, interval);
  }, interval/1000);
}

 

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

Why are you making a custom TimeoutCallId function instead of just using .delayedCall()?

 

I also do not understand what you're trying to do in the IntervalCallId function.

 

i can't explain, my english is not enough good 😇 but thanks for the tips it will help me.

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

If you want a GSAP version of setInterval you could do something like this:


// interval is in ms, just like setInterval
function setGSAPInterval(func, interval) {
  gsap.delayedCall(() => {
    func(); 
    setGSAPInterval(func, interval);
  }, interval/1000);
}

 

 

You have the params in the wrong order, and doing it like that will cause the time to drift the longer it runs. This way will give you consistent timing.

 

gsap.to({}, {
  repeat: -1,
  duration: 1,
  onRepeat: myFunc
});

 

  • Like 3
  • 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.

×