[Calculate post-transform bounding box]

Interesting! That means there has to be something in my code, causing the wrong math

 

Thank you very much for the nicest example, Blake!

[Calculate post-transform bounding box]

Hi GSAP people!

 

I need to animate an element to the closest off-screen position. To do that, I need to know the element bounding box, so I can make sure it's fully hidden. In most cases `getBoundingClientRect` works just fine, but the element can also have some transforms applied and even its transform origin changed. See the codepen for the idea.

 

As GSAP works heavily with transforms, I hope you'd be able to point me to the right direction. 

Is there a way to get the full transform matrix? I should be able to feed it the bounding box corners and get the real position.

Or is there anything else you'd recommend?

 

Thanks!

David

See the Pen gQMYjg by anon (@anon) on CodePen

[Rebuilding the very same timeline causes it to play differently]

Thank you @Sahil, that makes sense now when I see the positions in the log!

 

 

[Rebuilding the very same timeline causes it to play differently]

Hi GSAP people!

 

I'm working on a code that lets users build and customize animations. To get a consistent behavior, I'm keeping a reference to the animation timeline, `kill`ing it every time user changes some params and then rebuilding it again. But I noticed that even with the same inputs, the rebuilt animation doesn't look the same.

 

After narrowing it down to the smallest sample possible, it seems that there's something wrong with the timing. Upon first page load, everything looks as intended. But after I rebuild the timeline, it seems like its time got compressed somehow. It still plays the defined tweens, but it doesn't respect the timing.

 

Interestingly, rebuilding the timeline multiple times doesn't accumulate the time twisting.

 

I tried inspecting the timeline object, but haven't found anything supicious. The durations and start times look correct. Even when using a progress bar (in my project) to visualize the playback, it indeed plays linearly, but the actual tweens do not.

 

Everything should be clear from the attached pen.

Thanks in advance!

See the Pen yEEQzZ by anon (@anon) on CodePen