Shopify Lottie file scroll not playing when sticky

Question

I'm trying to add a Lottie file to my shopify page that plays on scroll and is contained in a dev that becomes sticky with top:0.

Here is my code:

<section class="presentation-block" id="lottie-container">
<!-- Inline styles -->
<style>
    #lottie-container {
        height: 200vh;
        position: relative;
      overflow:visible;
    }

    #lottie-animation {
        position: sticky;
        top: 0;
    }

    @media (min-width: 992px) {
        #lottie-animation lottie-player {
            max-width: 480px;
            margin: 0 auto;
        }
    }
</style>

<div id="lottie-animation" style="width: 100%; height: auto; background:red;">
    <lottie-player id="microBlade" src="{{ 'MicroBladev1.json' | asset_url }}" background="transparent" speed="0,5" style="width: 100%;" direction="1" loop="false"></lottie-player>

    <script>
        LottieInteractivity.create({
            player: '#microBlade',
            mode: 'scroll',
          container: '#lottie-animation',
            actions: [{
                visibility: [0, 1],
                type: 'seek',
                frames: [0, 90],
            }, ],
        });
    </script>
</div>
</section>

Weridly, the lottie file plays on scroll as expected, until the container becomes sticky - then it stops until the container is unstuck.

How can I make it so the Lottie file plays throughout the div's stickiness?