Unexpected behaviour using Barba.js with BarbaCSS plugin

I have been following Petr Tichy’s fantastic courses, but I am running into a glitch I cannot fathom while attempting the cover transition (https://ihatetomatoes.net/module-1/bjs-06-css-cover-transition-703/)

In essence, Barba.js is changing the transform values on a covering div (.transition) — but unlike in Petr’s example, Barba does not KEEP the transform values on the covering div, at the end of the animation the cover zooms back up over the page, which is not what we want.

My Barba js

    import barba from '@barba/core';
    import barbaCss from '@barba/css';
    barba.use(barbaCss);
    barba.init(
    
    {
        transitions: [
            {
                name: 'with-cover',
                to: {
                    namespace: ['with-cover']
                },
                leave() {},
                enter() {}
            }       
        ]
    }
);  

and the corresponding css

.with-cover-leave-active,
.with-cover-enter-active,
.with-cover-leave-active .transition,
.with-cover-enter-active .transition {

    transition: transform 2s cubic-bezier(0.5, 0.7, 0.4, 1);
 
 }

/* cover slides down */

.with-cover-leave .transition {

   transform: translateY(-100%); 
}

.with-cover-leave-to .transition,
.with-cover-enter .transition {

    transform: translateY(0);

}

/* cover slides down and off the bottom of the screen */
 
 .with-cover-enter-to .transition {
 
     transform: translateY(100%) !important;
 
 }

I think the top classes are meant to KEEP the .transition transforms values in place, but what actually happens is the animation completes, then the transition dive shoots back up to Y -100!

Really stuck as to why this page test I built is NOT following the pattern of this demo page (click ‘Cover transition’) — https://ihatetomatoes.net/demos/barbajs/barbajs-css-transition/clip.html

heres the basic html structure too

<header data-barba="container" data-barba-namespace="with-cover" >
    <div class="transition">
      <h2>Cover Screen — is this really working?</h2>
    </div>
    <div class="content">
      <h1>This is cover content</h1> 
    </div>
</header>

Any advice much appreciated. I want sure if Barba was maybe handling css differently now?

thanks