jonForum
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by jonForum
-
-
seem fine
- 1
-
2 minutes ago, GSAP Helper said:
Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅
ho sorry , oki after many test i just starting found correct solutions:
`overwrite: 'auto'` => ` overwrite: true,`
See the Pen BabpgPx?editors=0011 by djmisterjon (@djmisterjon) on CodePen
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- 1
-
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 -
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- 2
-
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 -
2 hours ago, GreenSock said:
I gave you a way to keep the callback where you had it:
gsap.timeline({ onStart: ( ) => console.log( '1' ), onComplete: () => console.log( '2' ), }).set({}, {}, 0.001);
ho i understand thanks , yes it look better !
-
7 hours ago, GreenSock said:
That's a very old version and I'd consider that a bug that has been fixed since then. That behavior isn't consistent with the description in the docs.
That should be quite simple, actually - you could just add a .set() call at 0.001 into the timeline that sorta "props it open" in a sense:
.set({}, {}, 0.001);
Or you could add the onStart itself as a callback instead at 0.001:
gsap.timeline({ onComplete: () => console.log( 'onComplete' ), }).add(() => console.log( 'onStart' ), 0.001)
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.
-
2 hours ago, GreenSock said:
From the docs:
Your timeline is completely empty, so its playhead can't move past 0.
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. -
2 hours ago, GreenSock said:
From the docs:
Your timeline is completely empty, so its playhead can't move past 0.
it work here !?
See the Pen pyYXQa by jedierikb (@jedierikb) on CodePen
-
On 4/29/2016 at 3:36 AM, GreenSock said:
I can see valid arguments on both sides. Ultimately I do lean slightly toward making onStart fire in this case. If anyone disagrees, please chime in. I've made that update in the 1.18.5 preview which you can check (uncompressed) here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better?
see not work anymore ! why?
See the Pen jOXpLWj?editors=1111 by djmisterjon (@djmisterjon) on CodePen
-
8 hours ago, Rodrigo said:
Hi,
You can use gsap.defaults() for that and override on each individual instance where you don't want that specific behaviour:
gsap.defaults({ onInterrupt () { console.log(this); // <- The GSAP Instance that was killed } });
https://greensock.com/docs/v3/GSAP/gsap.defaults()
Hopefully this helps.
Happy Tweening!
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 });`
-
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 ?! -
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 -
46 minutes ago, ZachSaucier said:
If you'd like additional help debugging please make a minimal demo of the issue.
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 !
```jsgsap.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);```
-
29 minutes ago, ZachSaucier said:
Why are you making a custom TimeoutCallId function instead of just using .delayedCall()?
I also do not understand what you're trying to do in the IntervalCallId function.
i can't explain, my english is not enough good 😇 but thanks for the tips it will help me.
-
3 hours ago, GreenSock said:
Or make your own helper function to make things even more concise and flexible:
// this would allow you to getTweensOf() or killTweensOf() and pass in the function itself. function delayedCall(delay, func, id) { return gsap.to(func, {delay: delay, onComplete:func, id:id}); } delayedCall(2, () => console.log("hit"), "myId"); gsap.getById("myId").kill();
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 vanillasetInterval(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 callbackif(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 usegsap.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.
-
2 minutes ago, ZachSaucier said:
You could get the target of the tween and set the renderable state yourself:
var elem = gsap.getById('blinkRenderable').targets()[0]; gsap.getById('blinkRenderable').kill(); gsap.set(elem, {renderable:true});
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 ?
override delay ?
in GSAP
Posted
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.