I have these jQuery functions:

    function isAnimationNeeded() {
            return $(document).width() > $(window).width();
    }
        
    function enableAnimation(){
            $('#flexRepeater', window.parent.document).css("animation", "marqueeA 10s linear infinite");
    }
        
    $(document).ready(function () {
            $('#enableAnimation', window.parent.document).on("resize", enableAnimation());

The way it’s currently set up, the animation triggers all the time (this is done in CSS), but I only need it activated when the document width is greater than the window width. I want to use the first function above (isAnimationNeeded) as a conditional test to check whether or not the animation should be enabled (the second function). I am not sure if this check would be called in the .on("resize") event handler or in the enableAnimation function itself.

Basically, if isAnimationNeeded() returns “true”, then the animation called marqueeA should be enabled.

Secondary questions if you know:

• I want my marquee animation to span the entire width of the document but I can’t figure out how to do this dynamically without setting up a handful of different keyframes (marqueeA, marqueeB, marqueeC…). I’d like just 1 set of keyframes (simply called “marquee“) that I can pass a parameter into (i.e. a percentage or pixel quantity for the keyframes, depending on how the math works out between document width and window width).
• I’d also like the duration of the animation to dynamically change based on how wide the marquee animation spans. If the document is quite wide, the animation needs to slow down in order to maintain a consistent viewing experience for end users. Possible within this jQuery setup, or am I stuck with static durations?

I am new to jQuery but am trying to learn more — any and all guidance is appreciated.