Jump to content
Search Community

jonForum

Members
  • Posts

    131
  • Joined

  • Last visited

Everything posted by jonForum

  1. juste a self note, this will make tl more hard to manage: example: so i need to alway think to override complexe tl. example here the pivot not work because the last crush the first ! am not sure i understand what happen underhood ! It's a shame not to have an understanding to just overwrite the delays and keep the classic behavior on auto.
  2. ho sorry , oki after many test i just starting found correct solutions: `overwrite: 'auto'` => ` overwrite: true,` https://codepen.io/djmisterjon/pen/BabpgPx?editors=0011 i will need make more deep test to see if this broke behaviors in my app !? but seem promising, de delay animation seem override thanks
  3. hi, Is there a way in GSAP to properly override the delay? I am looking for a valid way when I create a tween with the same object reference in memory, it properly overrides the animation and its properties. However, I would like the animation to have a starting delay, and this starting delay does not seem to be supported when overriding another tween. Therefore, I am looking for a behavior that would properly handle the delay when overriding a tween. here test code you can past in your console: setTimeout( async () => { console.log( '💚' ); const obj = { x:0 }; gsap.to( obj, { x:1, onStart:()=>console.log( '💨tl1', obj.x ), onUpdate:()=>console.log( 'upd-1', obj.x, ), delay:1 }); // how overide this tween with new delay ? gsap.to( obj, { x:2, onStart:()=>console.log( '💨tl2', obj.x ), onUpdate:()=>console.log( 'upd-2', obj.x ), delay:5 }); }, 1000 ); In the console log, I would expect the following result: 💨tl1 0 VM33167:4 upd-1 0.16821 VM33167:5 💨tl2 0.16821 VM33167:5 upd-2 0.476336 VM33167:5 upd-2 0.876304 VM33167:5 upd-2 1.304408 VM33167:5 upd-2 1.507727 VM33167:5 upd-2 1.729329 VM33167:5 upd-2 1.83238 VM33167:5 upd-2 1.921491 VM33167:5 upd-2 1.959754 VM33167:5 upd-2 1.987915 VM33167:5 upd-2 1.996086 VM33167:5 upd-2 1.999553 VM33167:5 upd-2 1.999989 VM33167:5 upd-2 2 instead i get this 💨tl1 0 VM33244:4 upd-1 0.039404 VM33244:4 upd-1 0.283607 VM33244:4 upd-1 0.53675 VM33244:4 upd-1 0.675071 VM33244:4 upd-1 0.810253 VM33244:4 upd-1 0.882882 VM33244:4 upd-1 0.942352 VM33244:4 upd-1 0.968883 VM33244:4 upd-1 0.988843 VM33244:4 upd-1 0.995772 VM33244:4 upd-1 0.999423 VM33244:4 upd-1 0.999948 VM33244:4 upd-1 1 VM33244:5 💨tl2 1 VM33244:5 upd-2 1.039404 VM33244:5 upd-2 1.283607 VM33244:5 upd-2 1.547878 VM33244:5 upd-2 1.675071 VM33244:5 upd-2 1.821494 VM33244:5 upd-2 1.882882 VM33244:5 upd-2 1.942352 VM33244:5 upd-2 1.968883 VM33244:5 upd-2 1.989514 VM33244:5 upd-2 1.995772 VM33244:5 upd-2 1.999423 VM33244:5 upd-2 1.999948 VM33244:5 upd-2 2 thanks
  4. oki thank everyone https://github.com/greensock/GSAP/issues/565 @Rodrigo yes it help thanks for your time , i will use your solution until jack fix the libs
  5. hi, i have issue with promise, is there any way to resolve `await Promise.all([ tl1 ])` when we overwrite a instance properties ? Some of my promise wait for animations but never resolve because they get crush somewhere in another child actions. ```ts gsap.defaults({ overwrite: 'auto', onInterrupt:function() { this.progress( 1 ); // force progress 100%, kill la promise pour les async await. } }); // test gsap promise all setTimeout( async () => { console.log( '💚' ); const obj = { x:0 }; const tl1 = gsap.timeline().to( obj, { x:8 }); const tl2 = gsap.timeline().to( obj, { x:5 }); // comment me for resolve Promise.all setTimeout( async () => { await tl1; console.log( '💚1' ); await Promise.all([ tl1 ]); console.log( '💚2' ); // never fired if tl2 executed }, 10 ); }, 1000 ); ``` is a `onInterrupt` bug ? or maybe we have another global cb for handle those case ? thanks
  6. Yeah, I just found it a bit unfortunate to have to separate the two callbacks in the code flow. It makes the reading less concise and coherent. I'll see if with your suggestions, I can refine the readability a bit more. Thanks for your time.
  7. Have you considered the possibility of adding a callback named "onStarting," ?, somewhat like a car with a starter: "onStarting": the car isn't yet started but initiates its startup sequence (Always fired , also if tl is empty). "onStart": the car is started (doesn't start if the timeline is empty). (fired only >0 ) I find that managing a scenario in which you want to dynamically add tweens to the timeline based on certain conditions is quite complex and hard. If all conditions are false, then the timeline will be empty, but we lose coherence because we can't fully use the callback structure correctly.
  8. it work here !? https://codepen.io/jedierikb/pen/pyYXQa
  9. see not work anymore ! why? https://codepen.io/djmisterjon/pen/jOXpLWj?editors=1111
  10. thanks ? Is there a know issue related to add this behavior to every instances ? Am also trying understand in what kind of scenario where when we override a tween, we will dont want resolve promises. If you have a example or time to make one where you can show issue related to add this globally ?:) Did you think it can be a also a good idea to eventually add a optimized internal flag ? To leave its Interrupt available for more interesting and specific situations? Maybe? ` gsap.config({ resolveOnOveride: true }); `
  11. i also fall into this issue. actualy this seem work !, i will need think on how to apply this globally to avoid add those events everywhere ?!
  12. i just add the issue link here, if someone vet gsap users have some more interesting idea and suggestion with my logic issue https://github.com/greensock/GSAP/issues/528
  13. 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.
  14. 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 !.
  15. 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
  16. 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); ```
  17. i can't explain, my english is not enough good ? but thanks for the tips it will help me.
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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.
  23. 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 ?
×
×
  • Create New...