jonForum

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

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

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

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

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

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.

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. Any information or link to doc for this ?

the small concern is that I wanted to keep a state that could be rendered for 2 seconds. 😀 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.

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)

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 ?

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.

work, thanks a lot for the fix

it maybe related to this ?

Sorry for late , i didn get alert here preview I also tested on microsoft edge beta (chromium) and i get same bug.

https://greensock.com/docs/v2/Easing when you click and change value, it not live update? Tested on Vivaldi and Firefox. Edit: try elastic,Back