ScrollMagic Animation and Scroll Locking Issue

Question

I'm currently working on a web project where I'm using ScrollMagic to create animations triggered by scrolling. I have a specific animation for a company name using the TimelineMax library. Additionally, I'm trying to lock the screen during the animation and unlock it when the user scrolls.

However, the code I've implemented isn't working as expected. The animation triggers fine, but the scroll locking and unlocking behavior doesn't work as intended. Here's the code I'm using:

$(document).ready(function () {
    // Initialize the ScrollMagic Controller
    var controller = new ScrollMagic.Controller();

    // Create your first scene (ourScene)
    var ourScene = new ScrollMagic.Scene({
        triggerElement: '#project03'
    })
        .setClassToggle('#project03', 'fade-in');

    // Add the "typing" animation for the company name
    var textAnimation = new TimelineMax();
    var letters = document.querySelectorAll('#company-name span');
    letters.forEach(function (letter, index) {
        textAnimation.to(letter, 0.5, { opacity: 1, delay: index * 0.2 });
    });

    var companyNameScene = new ScrollMagic.Scene({
        triggerElement: '#company-name',
        triggerHook: 1,
        reverse: false
    })
        .setTween(textAnimation)
        .setClassToggle('#company-name', 'visible')
        .addTo(controller)
        .on("start", function () {
            $("body").css("overflow", "hidden");
        });

    var scrollFunction = function () {
        $("body").css("overflow", "auto");
        $(window).off("scroll", scrollFunction);
    };

    $(window).on("scroll", scrollFunction);

    ourScene.addTo(controller);
});

I've tried various approaches, but I can't seem to get the scroll locking and unlocking to work properly. Can someone please help me identify what's causing the issue and suggest a solution? Thank you!