tagger

All clear now ! Thanks for the patience. Being an embedded sw engineer originally, i am used to look for multiple contexts

Definitely helps ! Just one more question so i can really understand : there is the context (thread?) on which my javascript runs. On that context i trigger the animation and the triger function is returning immediately. So i guess it sends some signal to another context on which greensock engine runs, and those ‘ticks’ frames are happening there. Right ? And this is that ‘greensock’s’ context which eventually calls any callbacks supplied. Is my understanding correct ? So if i understand correctly there are three threads involved : one for my js, one for greensock engine and one on which the browser renders ? And to gather in the previous answer, the greensocks’ thread is just a single thread and this is why when it is handling my .reversed() query - it will not handle animationFrames and this is why the race condition I asked about will not happen ? thanks again for your time

Thanks, Jack I was playing a little with the suggestions and while it indeed works, i did stumble on something i realise i dont really understand about greensock : at one hand, it seems to be asynchronous - the .reverse() function is non-blocking. At the other hand, i noticed that if i busy-wait on some attribute of the animated svg right after .reverse() returns - the animation gets stuck. So on what context does greensock run ? That attribute gets a specific value at the end of animation by .set thanks

thanks for advises ! wouldnt such a solution be race-prone ? what if the .reversed() condition returns a certain state but by the time the .progress() is called - the animation already finishes and so, in fact, it will be reversed again? I know the time is minimal, but in a repetitive animation it might happen with some unexpected consequences. Or am I missing something ? It feels there should be something built-in, atomic, in the library for such things ..

I have a timeline which can either be going in a regular (forward) direction or be reversing (.reverse() ) I would like to be able to get the timeline to finish immediately. if it is forwarding - to the end, if it is reversing - to the start. if it is going forward I have no problem to t.time(t.endTime()). if it is going backward, I can check if t.reverse() and set the time to 0, probably But I am looking for an elegant solution ( without an if ) that will take the head to the planned end ..

Thanks @Noturnoo, but i want the attribute change as a part of the timeline, since i will want to reverse it and expect the last thing to happen is this attribute to return to the original value. @Carl - exactly what I was looking for ! A couple of questions, if I may 1. Do you know where I can learn about the architecture of GSAP - things like which functions are blocking-which are non-blocking; are there threads created for tweens; 2. How did you calculate the 200msec delay before reading the attribute back ? Is this value deterministic ? Will it be affected if I have many tweens on the page ? Do I still have to wait if after the .set() I have a pretty long .staggerTo() on the timeline ? I know those are a lot of questions. If you can just point me to the document where I can learn all that - it will be great ! thanks in advance

I am trying to .set a custom attribute ("fan") but to no prevail. What am I doing wrong please ?

Thanks for the tip Codepen added in the question

I am trying to rotate an SVG with a text element whose "y" attribute is expressed in % units. During the animation the text does not keep the proper position. The elements slides down relatively to other elements in the SVG . If I change the "y" attribute to an absolute value - it rotates as expected Even if I perform only the .to tween - I can see the text slide down a little ... Is it something I should expect ? My tween : tl = new TimelineMax({paused: "true"}); tl .to(svg, 1, {delay: 1, attr:{viewBox:"-120 -96 392 96"}} ) .staggerTo(".symbol_copy", 1, { autoAlpha: true, svgOrigin: "8px 56px", cycle: { rotation: [-100,-75,-50,-25], rotationZ: 0.001, delay: function(index) { return 0.7-(0.15 * index); } } }, 0 ); maxi_tl.play();