jonForum

sure , did you have template with https://codesandbox.io/ with gsap and react , just for save time, or i can do one. Will take a look on your article, thanks.

here the behavior, first collapse pass work , but after no animation. it might sound silly, but i'm a bit obsessive about this detail, even if it's still functional for the app !.

Am getting a issue here return ( <Box display='flex' flexDirection='column' > <Box display='flex'> <Button onClick={() => { lstore.open = !lstore.open; const domNode = lstore.collabeRef.current; const h = lstore.open ? domNode.scrollHeight : 0; if (lstore.open) { // if proceed opening gsap.to(domNode, 0.3, { height: h, opacity: 1 }) .eventCallback('onComplete', () => { domNode.style.height = '100%'; }); } else { // here the issue, if node have with 100% , animations not work // i also try From and domNode.style.height = domNode.scrollHeight+'px' not work gsap.to(domNode, 0.3, { height: 0, opacity: 0 }); } gsap.fromTo(domNode, 0.5, { translateX: -100 }, { translateX: 0 }); }} > {title} </Button> </Box> <Box ref={lstore.collabeRef} > {children} </Box> </Box> ); after the event onComplete fired the following code `gsap.to(domNode, 0.3, { height: 0, opacity: 0 });` no longer works and there are no more animations. how i can animate height 100% to 0% or 0px ? i also try hacky way like just before perform this domNode.style.height = domNode.scrollHeight+'px' just before the animations , but not work ! thanks

Sup guys, do you have something to get optimal formatter with gsap? With a prettier plugins or another formatters? Prettier is nice for react,jsx, but became weird with gsap chaining. What did you use ? any recommendation or special setting ? Example here, syntax became buggy, look gsap color, because it break lines for a reason i dont know ! Maybe a way to get something like this ? optimal space ! ```js gsap.to('.ActivityTab', 0.6, { opacity: 1, scale: 1, rotation: 0, y: '0%', ease: 'elastic.out(1.2, 0.75)', stagger: { from: 0, amount: 0.5, }, }).delay(0.5); ```

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.