Mia+Lily
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Mia+Lily
-
-
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
-
-
1
-
-
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!
Calculate post-transform bounding box
in GSAP
Posted
Interesting! That means there has to be something in my code, causing the wrong math
Thank you very much for the nicest example, Blake!