Waiting for elements that contain animation/movement to not move anymore

[mduivcap]

On our website we have anchor navigation and once scrolled down a bit on the page, a back-to-top buttons appears which stick to the bottom of the page.

<div class="back-to-top__button-container visible" style="bottom: 24px;">
  <button class="button...

UNLESS you're scrolled down all the way to the bottom and the footer is visible, then it should stay above the footer.

<div class="back-to-top__button-container visible" style="bottom: 295.625px;">
  <button class="button...

So far so good, I've manually tested this functionality and it works like a charm.
I even found a way to determine if the element is located above the footer.

cy.get("footer").scrollIntoView();
cy.get(".back-to-top__button-container").then(($el) => {
            const buttonBottomPosition = $el[0].getBoundingClientRect().bottom;
            cy.get("footer").then(($footer) => {
                const footerTopPosition = $footer[0].getBoundingClientRect().top;
                expect(buttonBottomPosition).to.be.lt(footerTopPosition);
            });
        });

Now comes the tricky part.
I can't find a way to wait for the element animation.
The moment we scrolled to the footer this check is performed and the button is still within the footer and not above it so the test fails.
If we add a cy.wait(600); The button moved above the footer, but is still busy with some animation and it might be that it's a bit within the text area itself.
If we add a cy.wait(1000); all animation stopped and if we make a screenshot now we do see it's 100% in position where it should be.
But what is the proper way to wait for this element to move?
I thought Cypress would wait for element animation, but I can't seem to find to much information about it.
I did find this page, but I have no clue how to incorporate this into the test
https://docs.cypress.io/guides/core-concepts/interacting-with-elements#Animations