Running swup.js with webflow.push(()=>{})

Design help Custom code
1

Hi.
Context : My project in Webflow involves controlling Lotties with JavaScript which is then used in a GSAP ScrollTrigger animation.
I referred to this forum post and it works really well. This uses Webflow.push to initiate the animation.
The main reason I am using this is because there are multiple lotties that need the same animation, so this is simpler than loading each animation via Lottieweb.

The Issue - I now have swup.js integrated for page transitions and Webflow.push completely fails.

Is there a documented method on how to use Webflow.push in this context, I think webflow.push runs only once on page load, and does nothing after Swup swaps the content, because there is real re-load.

This is my swup set-up for now (minimal code for readability)
everything works by the way, except the code that needs webflow.push.

function showLoader(){..logic for showing transition}
function hideLoader(){..logic for hiding transition + webflow reinitialization
Webflow.destroy();
  Webflow.ready();
  Webflow.require("ix2").init();

  document.dispatchEvent(new Event("readystatechange"));
runAnimations()//this runs page gsap animations}
const swup = new Swup({
  animateHistoryBrowsing: true,
  containers: [".page-wrapper"],
  plugins: [
    new SwupJsPlugin({
      animations: [
        {
          from: "(.*)",
          to: "(.*)",
          out: async () => {
            await showLoader();
          },
          in: async () => {
            await hideLoader();
          },
        },
      ],
    }),
  ],
});
runAnimations(){...all page animations including the one relying on webflow.push}