jonForum
-
Content Count
117 -
Joined
-
Last visited
-
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
-
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,
-
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] * @membero
-
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 s
-
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
