jonForum

January 17

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.

January 16

seem fine

January 16

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

January 16

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

December 12, 2023

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

December 12, 2023

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

October 1, 2023

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 !

October 1, 2023

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.

October 1, 2023

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.

October 1, 2023

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

September 30, 2023

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

May 12, 2023

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 });

`

May 11, 2023

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 ?!
image.png.35d6fa3fd11ff3c2020c69aec0045465.png

March 3, 2023

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

September 8, 2020

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.

September 8, 2020

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 !.

September 8, 2020

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

September 7, 2020

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);

```

February 14, 2020

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.

February 14, 2020

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 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

February 14, 2020

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

February 14, 2020

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

February 14, 2020

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

February 10, 2020

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.

February 10, 2020

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 ?

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by jonForum