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

 

Share this post


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

Share this post


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

Share this post


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

 

Share this post


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

Share this post


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

Share this post


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.

Share this post


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

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.

×