Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Everything posted by jonForum

  1. 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.
  2. 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 !.
  3. 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
  4. 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,
  5. i can't explain, my english is not enough good 😇 but thanks for the tips it will help me.
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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.
  11. 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 ?
  12. 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.
  13. 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)
  14. 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 ?
  15. 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
  16. Sorry for late , i didn get alert here preview I also tested on microsoft edge beta (chromium) and i get same bug.
  17. 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
  18. In your demo, how we should work with events callback ? Example if you want call a event each circle ? the onRepeat not work if we put outside, stagger. It work if we put inside, but it compute from each elements. https://codepen.io/djmisterjon/pen/povgbGm
  19. Hey @OSUblake thanks you so much for this example and your time, your awesome. this help a lot
  20. Hey any tips or suggest to perform a kind of reel infinite random motions? I find my approach too redundant. Example on text matrix? I get a random behavior, but alway same from looping ! this is currently the code startMotion(){ const List = this.child.Master.children; //words //!motions words if('option motions words'){ gsap.staggerFromTo(List, 0.5, {alpha:0},{alpha:1, ease: Power1.easeIn}, 0.4); gsap.staggerTo(List, 4, { x:()=>`+=${Math.randomFrom(4,-8)}`, y:()
  21. HO, "auto" look fixed the issue here and also a lot of other issue in my core, i guess it was the solution. gsap2 was overwrite:"auto" by default ! and gsap3 was false by default ! **** why i didn't see this before!!! I think I just found the holy grail of all my hell problems with my events in gsap3. ??
  22. Hey is this a bug or a misunderstood feature. I have issue with overwrite. In this demo if we make {overwrite:true} The timeLineId 'action' should override the timeLineId 'pre' only at 3 seconde no ? And if we make {overwrite:false} The timeLine 'pre' will continue in background and make big spike after 'action'. https://codepen.io/djmisterjon/pen/VwwJeJQ would it be possible technically to make override only act when the child timeLine execute has 3 seconds? thanks for help or suggest.